Syren Syren - 3 months ago 16
CSS Question

Proper way to position :before pseudo-elements

What is the proper way to position

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: 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>

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
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?


Try using background instead of content and put a placeholder in content: