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 or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Pseudo-element selectors

css / selectors

Estimated reading time: 1 minute, 22 seconds

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.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.