Marko Marko - 2 months ago 5
CSS Question

On hover set wider absolute positioned element but to the opposite side

I want to have a list of Font Awesome icons on the outer bottom side of a Bootstrap column. Currently I have positioned them absolutely and when I set bigger width or bigger padding on hover that icon will grow bigger to the left, while I want it to go on the right.

How do I set it to go on the right, and also how to stop second element from reacting? That feature isn't planned :)
If someone has a better idea how to set it different I would be glad to hear.

http://codepen.io/filaret/pen/ORNmPZ

ul {
position: absolute;
bottom: 60px;
right: -50px;
li {
a.btn {
width: 50px;
height: 46px;
display: block;
&:hover {
width: 100px;
padding-left: 50px;
}
}
}
}

<div class="col col-md-8">

... content ...

<ul class="share-buttons-outside list-unstyled">
<li>
<a class="btn" href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
</li>
...
</ul>
</div>

Answer

Instead to position relative to right edge, do position from left:

ul {
    left: 100%;
    /* REMOVE right: -65px */
}
Comments