Marko Marko - 11 months ago 42
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.

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">
<a class="btn" href="#">
<i class="fa fa-facebook" aria-hidden="true"></i>

Answer Source

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

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