CODEWITHSUNDEEP
htmlcss
assembler
assembler

Reputation: 3302

How to set some spaces before a link without moving the link position?

I need to higlight a div 5 pixels before its current position on mouse over. That is to say if the user passes the pointer over it the div would be highlighted 5 pixels before, but without changing its content position.

.container {
  width: 100%;
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 5px;
  }
}
<div class='container'>
  <a href='#'>Click me!</a>
</div>

On mouse over it highlights but the "Click me!" message moves 5 pixels to the right. How can I achieve this?

Upvotes: 0

Views: 86

Answers (4)

000
000

Reputation: 27227

Use the outline property. This is literally the use case it is meant for. It improves accessibility. For more info read http://www.outlinenone.com

Upvotes: 0

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

Try this SCSS

.container {
  width: 100%;

  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 5px;
    a{
    margin-left:-5px;
     }
  }
}

Link for reference

hope this helps..

Upvotes: 1

hairmot
hairmot

Reputation: 2975

I've had a go at this as it looked fun.

Moving the element 5px left whilst preserving the contents with padding (and adding 5px to the width to offset the shift)

You should have something that looks like this:

.container:hover {
  position:relative;
  width:calc(100% + 5px);
  left:-5px;
  box-sizing:border-box;
  padding-left:5px;
}

Code pen here

Upvotes: 0

Renzo Calla
Renzo Calla

Reputation: 7696

add margin-left:-5px; to your hover class

.container {
  width: 100%;

  
}
.container:hover {
    background-color: rgba(0, 0, 0, 0.1);
    position: relative;
    margin-left:-5px;
  }
<div class='container'>
   <a href='#'>Click me!</a>
</div>

Upvotes: 1

Related Questions