demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter.

featured articles

popular favourites

Pseudo-element selectors

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

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.

::first-letter

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.

::before

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.

::after

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

::selection

The sole pseudo-element selector addition of CSS3. ::selection changes the appearance of selected text. You may find that older versions of Firefox and Chrome/Safari require ::-moz-selection and ::-webkit-selection, respectively.

You must be signed up in order to leave comments.

web developer guide

featured comment

by Aisling Brock in New Business Card Design

what i'm reading

A Feast for Crows: A Song of Ice and Fire: Book Four
A Feast for Crows: A Song of Ice and Fire: Book Four

what i'm watching

Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]
Prometheus: Collector's Edition (Bilingual) [Blu-ray 3D + Blu-ray + DVD + Digital Copy]

what i'm playing

Borderlands
Borderlands

what i'm hearing

Planets
Planets

blogs

podcasts

no ads ever

This blog is free of advertising, and always will be.

creative commons licensed

The content of this blog is free to use in whatever way you wish under the Creative Commons license.