CODEWITHSUNDEEP
htmlcsspseudo-element
D3CIDE
D3CIDE

Reputation: 13

Pseudo element :hover on ::before

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;

}

Upvotes: 1

Views: 13010

Answers (2)

brouxhaha
brouxhaha

Reputation: 4093

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.

Upvotes: 0

suff trek
suff trek

Reputation: 39777

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/

Upvotes: 6

Related Questions