CSS Pseudo-elements

CSS pseudo-elements allow us to style a certain part or block of a given element without adding any external id or class to it. For example, you can style the first letter or first line of an element. You can even insert some additional content before or after the element’s content.

Notice that the first letter of below paragraph has a yellow background and red color. This is exactly what pseudo-elements do.

This is a paragraph.

In this CSS tutorial, we will discuss some of the most commonly used pseudo-elements in detail. So, let’s get started:

Syntax of a Pseudo-element

The pseudo elements start with a :: symbol. Below is the syntax:

selector::pseudo-element{
  /* CSS Styles */
}

CSS ::first-letter Pseudo-element

The ::first-letter pseudo-element allows you to style the very first letter of a text.

In the example given below, the ::first-letter pseudo-element sets a yellow background to the first letter of each paragraph.

Example:

p::first-letter{
  background: yellow;
}

Note: The ::first-letter pseudo-element works only with the block-level elements.

CSS ::first-line Pseudo-element

The ::first-line pseudo-element allows you to style the very first line of a text.

The ::first-line pseudo element in the example below sets a yellow background to the very first line of the paragraph. Try it out to see how it works:

Example:

p::first-line{
  background: yellow;
}

The ::first-line pseudo-element works only with the block-level elements.

CSS ::before Pseudo-element

CSS ::before pseudo-element allows us to insert some external content just before the element’s own content.

In the example below, the ::before pseudo-element inserts an image in the beginning of the <h1> tag.

Example:

h1::before{
  content: url('images/flower.jpg');
}

CSS ::after Pseudo-element

CSS ::after pseudo-element is used to insert some additional content at the end of the element’s own content.

The example given below inserts an image at the end of <h1> tag. Try it out to see how it works:

Example:

h1::after{
  content: url('images/flower.jpg');
}

CSS ::selection Pseudo-element

CSS ::selection pseudo-element is used to style the content of an element that is selected by the user.

Example:

::selection{
  background: orange;
}

Pseudo-elements with CSS Id

Pseudo elements can also be combined with element’s id. Refer the example below:

Example:

#pseudo::first-letter{
  background: yellow;
  color: red;
  font-size: 2em;
}

Pseudo-element with CSS Class

Pseudo-elements can also be combined with CSS classes. The styles defined under pseudo-element will affect all the elements with that class name.

Example:

.pseudo::first-letter{
  background: yellow;
  color: red;
  font-size: 2em;
}