Pseudo-Elements

Pseudo-elements

A pseudo-element styles specific parts of an element. For example, we could use it to style the first letter (::first-letter) or line (::first-line) of a given element. Alternatively, we could use it to add content before (::before) or after (::after) an element.

For example:

p::first-letter {
  color: red;
  text-transform: uppercase;
}

In the example above, every <p> first letter is selected using the ::first-letter pseudo-element. The color is set to red and the text is set to uppercase.

We can identify a pseudo-element when they begin with a double colon (::). A single colon can also be used, but the standard convention is to use a double colon to clarify that these are different from pseudo-classes.

Some common pseudo-elements include the following:

• The ::first-letter pseudo-element is used to style the first letter of a text.
• The ::first-line pseudo-element is used to style

...