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;
}