Search⌘ K
AI Features
Home
Courses
The Complete Beginner’s Guide to CSS

Pseudo-Elements

Explore how to use CSS pseudo-elements to style parts of web page elements such as the first letter, first line, or content before and after elements. This lesson helps you apply precise styling for enhanced text and layout control, including user text selection styles.

We'll cover the following...

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
...