Pseudo-element

In CSS, a pseudo-element is a keyword added to a selector that allows you to style a specific part of an element, such as its first letter or first line, without adding any additional markup to the HTML document. Pseudo-elements are denoted by a double colon (::) following the selector.

Pseudo-elements allow you to add styles that would otherwise require additional HTML elements to the document, saving time and making your code more efficient. They can be used to style parts of an element’s content or to add decorative elements to an element without affecting its overall layout.

There are several types of pseudo-elements in CSS, each with its own unique purpose and syntax. In this article, we’ll take a closer look at the different types of pseudo-elements and how you can use them to enhance your web designs.

Syntax

Pseudo-elements are added to the end of a selector using double colons (::). The syntax for a pseudo-element is as follows:

selector::pseudo-element {
  /* styles */
}

For example, to style the first letter of a paragraph element, you would use the following code:

p::first-letter {
  /* styles for the first letter */
}

Types of Pseudo-elements

There are several types of pseudo-elements in CSS, each with its own unique purpose and syntax. The most commonly used pseudo-elements are:

::before

The ::before pseudo-element allows you to insert content before the content of an element. This is often used to add decorative elements to an element or to insert icons or symbols. The content is added as if it were part of the element, but is not part of the document tree.

The syntax for ::before is as follows:

selector::before {
  content: "content here";
}

For example, to add a decorative icon before a link, you would use the following code:

a::before {
  content: "\f0c9";
  font-family: FontAwesome;
}

This code adds a Font Awesome icon before the link. The content property specifies the character code for the icon, and the font-family property specifies the font to use.

::after

The ::after pseudo-element is similar to ::before, but inserts content after the content of an element.

The syntax for ::after is as follows:

selector::after {
  content: "content here";
}

For example, to add a decorative border after a heading, you would use the following code:

h1::after {
  content: "";
  display: block;
  height: 2px;
  background-color: #333;
}

This code adds a 2-pixel high black bar after the heading. The content property is empty, indicating that no content should be added, and the display property is set to block to ensure that the border is displayed on a new line.

::first-letter

The ::first-letter pseudo-element allows you to style the first letter of an element. This is often used to create drop caps or to add decorative elements to the beginning of a paragraph.

The syntax for ::first-letter is as follows:

selector::first-letter {
  /* styles for the first letter */
}

For example, to create a drop cap for the first letter of a paragraph, you would use the following code:

p::first-letter {
  font-size: 2em;
  float: left;
  margin-right: 5px;
}

This code increases the font size of the first letter and floats it to the left, creating a drop cap effect. The margin-right property adds space between the drop cap and the rest of the text.

::first-line

The ::first-line pseudo-element allows you to style the first line of an element. This is often used to add decorative elements to the beginning of a paragraph or to create a highlight effect.

The syntax for ::first-line is as follows:

selector::first-line {
  /* styles for the first line */
}

For example, to create a highlight effect for the first line of a paragraph, you would use the following code:

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

This code adds a yellow background color to the first line of the paragraph.

::selection

The ::selection pseudo-element allows you to style the text that is selected by the user. This is often used to highlight selected text or to change the color of links when they are clicked.

The syntax for ::selection is as follows:

selector::selection {
  /* styles for the selected text */
}

For example, to change the background color of selected text to yellow, you would use the following code:

::selection {
  background-color: yellow;
}