# Pseudo-elements in CSS

Paul Tomoiu

●

CSS,

frontend,

web

●

Published 2022-12-03

This tutorial explains what is a Pseudo-element in CSS.

A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:

Insert content before, or after, the content of an element
Style the first letter, or line, of an element

The syntax of pseudo-elements:

selector::pseudo-element {
   property: value;
}

Example:

p::first-letter {
  color: red;
  float: left;
  font-size: 2.0em;
  font-weight: bold;
}

In this case, the first letter from a p tag will be in red with the properties above. In this case, the first letter is seen as a distinct element.

Here are the most used pseudo-elements:

::first-letter -> used to add a special style to the first letter of a text.
::first-line -> used to add a special style to the first line of a text.
::before -> creates a pseudo-element that is the first child of the element matched.
::after -> creates a pseudo-element that is the last child of the selected element.
::marker -> enables us to select and modify the bullet icon and number in the marker box of a list item.
::placeholder -> allows you to style the placeholder of form input elements. Most browsers, by default, have light gray colored placeholders.
::selection -> create a special style for a content/text which is selected in the browser.

Another interesting tutorial is Pseudo-classes in CSS.