XML in a Nutshell, 3rd Edition

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;
}