Proper way to position :before pseudo-elements

Question

What is the proper way to position :before and :after pseudo-elements, like pictures? I've been messing around with a bunch of different ways, but none of them seem like very elegant solutions.

This is what I'm trying to do:

This is what I did:

div.read-more a:before {     content: url('/images/read_more_arrow_sm.png');     position: absolute;     top: 4px;     left: -15px; }  <div class="read-more">     <a href="#">Read More</a> </div> 

I basically just want the image to be aligned with the text. Is there another way to do that?

It would be perfect if I could just use padding and margins on the :before image, and that is supposed to be what you do. But for some reason, that hasn't been working for me. I can add horizontal padding and margins, but top and bottom padding doesn't do anything. Why would that happen?

Answer 1

You can use the following code in order to move the content:

div.read-more a:before {   content: "\00BB \0020";   position: relative;   top: -2px; }