Pseudo element :hover on ::before

Question

I am looking to add a small circle to a Pseudo element using :hover but my wanted result is for the circle to appear ::before without moving the text itself. I am looking to apply this method eventually to navbar's using images.

Here is my HTML example:

<div class="bla">
  <p><a class="circle">Hello Circle</a></p>
</div>

Here is my CSS example:

.bla {
left: 300px;
position: relative;

}

.circle:hover::before{
content: "";
height: 20px;
width: 20px;
background-color:#D13335;
border-radius: 50%;
webkit-border-radius: 50%;
display: inline-block;
margin-right: 10px;
float: left;

}

Answer 1

You can use absolute-positioning for your circle:

.circle:hover::before{
content: "";
height: 20px;
width: 20px;
background-color:#D13335;
border-radius: 50%;
webkit-border-radius: 50%;
position:absolute;
left:-20px;

}

Demo: http://jsfiddle.net/U5H3y/

Answer 2

You can use position: absolute; left: -20px to prevent the text from moving. Demo

left: -20px just matches the width of the circle, so if you want to give it some more space, you can increase this. Using position: absolute; takes it out of the flow, so it won't push/pull the text.