Web Design Garage

Chapter 57. Using Pseudo-Elements

In CSS, pseudo-elements are special add-ons to HTML tag selectors. They identify particular sections of the text inside the HTML element. Currently, there are two pseudo-elements: first-line and first-letter. You can apply them to any text tag or any tag that contains text, such as a table or a div.

Any old style sheet might identify a general paragraph style:

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Only an especially clever style sheet adds a pseudo-element that instructs the browser what to do with the first line in a paragraph:

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

p:first-line {
  font-weight: bold;
  font-variant: small-caps;
}

GEEKSPEAK A CSS pseudo-element ...