Syren Syren - 1 month ago 6
CSS Question

Proper way to position :before pseudo-elements

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:

enter image description here

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

Try using background instead of content and put a placeholder in content: http://jsfiddle.net/7X7x2/1/

Comments