CODEWITHSUNDEEP
csspseudo-element
Helena Standaert
Helena Standaert

Reputation: 569

:before pseudo element without moving actual content

I want to have a certain link element always on the next line with an icon before it like this: 

  Lorem ipsum dolor sit amet, consectetur adipiscing      
  imperdiet turpis vulputate vel. Duis erat purus,     
  Maecenas eu odio eget felis commodo lacinia. Sed pellentesque, 
  metus id blandit volutpat, mi nisl egestas lacus, ut
> THIS IS THE LINK

and NOT like this

  Lorem ipsum dolor sit amet, consectetur adipiscing      
  imperdiet turpis vulputate vel. Duis erat purus,     
  Maecenas eu odio eget felis commodo lacinia. Sed pellentesque, 
  metus id blandit volutpat, mi nisl egestas lacus, ut
  > THIS IS THE LINK

Now when I use the :before pseudo element, it does the job, but when changing the font or font-size, the indentation is wrong.

a:before{
   content:"> ";
   width:0;
}

Anyone?

Upvotes: 4

Views: 2551

Answers (1)

SW4
SW4

Reputation: 71150

This should do it:

Demo Fiddle

a{
   position:relative;
}
a:before{
   content:"> ";
   width:0;
   position:absolute;
   left:-10px;
}

You need to set up the positioning for the before :psuedo, then offset it to its left. In order to do this, it needs to work out where to position itself relative to, which is why you also give the 'parent' a a position.

As Duroth notes - you can also assign the pseudo a position value of absolute if you dont want it to appear to occupy space.

Upvotes: 5

Related Questions