Pseudo-Element Selectors
Pseudo-element selectors match things that aren’t actually elements. Like pseudo-class selectors, they’re attached to an element selector by a colon. There are four of these:
first-letter
first-line
before
after
The first-letter
pseudo-element selects the first letter of an
element. For example, this rule makes the first letter of the
story
element a drop cap:
story:first-letter { font-size: 200%; font-weight: bold; float: left; padding-right: 3pt }
The first-line
pseudo-element applies formatting to all characters
in the first line of a block-level element. If the browser window is
resized so that characters move into or out of the first line, then
the formatting changes to match. For example, this rule formats the
first line of the story
element
in small capitals instead of lowercase letters:
story:first-line {font-variant: small-caps}
The before
and after
pseudo-elements select the points immediately before
and after the specified element. You can’t really apply font or text
styles to a zero-width point, but you can insert text at that point
using the content
property. For
example, this rule inserts the string “Ingredients!” before the
ingredients
element:
ingredients:before {content: "Ingredients! "}
This rule places the number of the step in front of each
step
element in the form 1., 2.,
3., and so on:
step:before { content: counter(step) ". "; counter-increment: step; }
Get XML in a Nutshell, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.