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: 
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/>
You can use `position: absolute; left: -20px` to prevent the text from moving. **[Demo](http://jsfiddle.net/G66cP/1/)**

`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.