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

Question

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 1

Instead to position relative to right edge, do position from left:
ul {
left: 100%;
/* REMOVE right: -65px */
}

Answer 2

You could add a margin to correctly position it:
ul li a.btn:hover {
width: 100px;
margin-right: -50px;
padding-left: 50px;
}
This appears to correct the issue of one interacting with the other also.
Working codepen: http://codepen.io/sol_b/pen/xEVdgj

Answer 3

You could set a left value, instead of right:
ul {
position: absolute;
bottom: 60px;
left: 758;
...

Answer 4

Maybe this simple solution is enough. Instead of
right: -50px;
do
left: 760px;

Answer 5

You could use position: absolute; on your li elements:
Codepen
li {
border: 0;
position: absolute;
left: -50px;
top: -46px;
&:nth-child(2) {
top: 0;
}
}