Get to Grips with CSS Pseudo-Elements

Pseudo elements include :first-line, :first-letter, :before and :after. In the CSS specification, W3C define pseudo-elements like this:

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. CSS pseudo-elements allow style sheet designers to refer to this otherwise inaccessible information. Pseudo-elements may also provide style sheet designers a way to assign style to content that does not exist in the source document…

Mmm, now I don’t know about you but that description makes my head hurt. Let’s take a closer look at pseudo-elements and see how we can use them in our own projects.

Continue reading