Pseudo-Elements

The first type of pseudo thing we will discuss are pseudo-elements.

There are two types of pseudo-elements:

• ::first-letter
• ::first-line

Respectively, these allow for the selection of the first letter or first line in an element’s text. This selection can then be used to alter the appearance or display of just the first letter or line.

selector::first-letter {}
selector::first-line {}

/* The word selector in the above is replaced with
the normal CSS selectors used to identify elements. */
p::first-letter {
  color: green;
}

“Why would I use a pseudo-element?”

In the example below, try changing the font size. Because we used pseudo-selectors instead of more direct selectors, content like the first line remains styled as set. The first line remains the first line, despite how many words there are in it.