Menu
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?
721
The ::before pseudo-element can be used to insert some content before the content of an element.
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
The recommended order is link,visited,focus,hover,active. The :link and :visited pseudo-classes should generally come first. Next should be :focus and :hover—they're specified now so that they override and apply to both visited and unvisited links.
You can use the following code in order to move the content:
div.read-more a:before { content: "\00BB \0020"; position: relative; top: -2px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
