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 the first line of a text.
• The ::before pseudo-element lets us add rules before an element.
• The ::after pseudo-element lets us add rules after an element.
• The ::selection pseudo-element selects text targeted by the user.

There are more, but they’re considered experimental. In this lesson, our main focus is on the pseudo-elements listed above.

The ::first-letter pseudo-element

As we saw earlier, the ::first-letter pseudo-element adds styles to the first letter of the text.

Let’s see this in action by changing the first letter of the text in our <p> element to a larger font size. The example uses a %, but you could use any valid CSS unit, such as px, rem, em, and so on:

p::first-letter {
  font-size: 150%;
}

Note: The ::first-letter can only be applied to block-level elements. A block-level element is any element that starts on a new line, such as <div>, <h1> to <h6>, <p>, and so on. It can’t be applied to inline elements such as or <code>.

A neat trick is to combine pseudo-element selectors with classes:

p.summary::first-letter {
  color: red;
}

Here, we can set the style for the first letter of every paragraph with the summary class.

::first-line

The ::first-line pseudo-element styles the first line of a text block.

To give the first line of any <p> elements a bolder font, we could use the following code:

p::first-line {
  font-weight: 600;
}

Only some of the available CSS properties can be used to style a ::first-line. This is typically only the font, text, and background-related CSS properties.

The ::before and ::after pseudo-elements

These are probably the most commonly used pseudo-elements. Let’s review the following CSS code:

div::before {   
   content: "before"; 
} 
div::after {   
   content: "after"; 
}

Note: The content property is required, because it specifies the content to be added.

This translates into the following HTML:

<div>   
   before   
   <!-- Everything else in our div -->   
   after 
</div>

The ::before pseudo-element

The ::before pseudo-element can be used to insert new content before the content of an existing element.

A common use case would be if we wanted to add an icon before the content of an <h1> element:

h1::before {
  content: url(icon.png);
}

We can use the content property to insert whatever content we like:

p::before {
  content: "Check this out: ");
  color: green;
  font-weight: bold;
}
.company::before {
   content: url("images/logo.png");
}

The ::after pseudo-element

The ::after pseudo element inserts new content after the content of an element that’s already there.

Here, we insert an icon after each <h1> element, like so:

h1::after {
  content: url(icon.png);
}

Alternatively, we could add an arrow symbol ("→") after any links, as shown below:

a::after {
  content: "→";
}

::selection

The ::selection pseudo-element is another extremely useful property. It selects the portion of an element that the user selects.

We can use this to style text as highlighted. Here, we set it as green with a gray background:

::selection {
  color: green;
  background: gray;
}

The properties which can be used with ::selection include color, background, cursor, and outline.

A full example of the concepts presented in this lesson is given below:

Example