Pseudo-element selectors are distinguished from pseudo-class selectors by the fact that the latter affect elements when they are in particular states (for example, a:hover controlling the appearance of links when the mouse is over them). Pseudo-element selectors control the appearance of portions of an element’s content, such as the first line or letter of a paragraph.

With CSS3, the W3C instituted the convention that pseudo-element selectors should be preceded by two colons, to distinguish them from pseudo-class selectors, which get just one. In theory, modern browsers should recognize this rule, and they do… except for IE6 – 8. Also in theory, browsers should honour single colons in front of pseudo-element selectors that were present in CSS1 and 2, but I’ve found that certain browser versions do not. Personally, I’d go with the W3C recommendation.

As before, I’ve linked to articles in the blog where appropriate.

Pseudo-element selectors
Pseudo-element selectorPurpose

Selects the first line of content in an element. Typically applied to paragraphs (for example p::first-line). Useful for first-line run-in effects.


Selects the first letter of an element. Typically applied to paragraphs or headings (for example, p::first-letter). Useful for creating initial and drop caps.


Inserts content before a selection. Has all sorts of uses: generating opening quote marks for pull quotes, creating separators for navigation bar links, and much more.


Just like ::before, with all the same uses, but generates content after a selection.


Changes the appearance of selected text.

Enjoy this piece? I invite you to follow me at to learn more.