CSS pseudo elements

Understand the basics of CSS pseudo-elements

Pseudo-elements are used to style specific parts of an element.

They start with a double colon::.

Sometimes, you may find them with a single colon, but for backward compatibility reasons, this is only a supported syntax. You should use 2 colons to distinguish them from pseudo-classes.

::beforewith::afterProbably the most commonly used pseudo-element. They are used to add content before or after elements, such as icons.

This is a list of pseudo-elements:

Pseudo-element the goal
::after Create a pseudo element after the element
::before Create a pseudo element before the element
::first-letter Can be used to set the style of the first letter of a text block
::first-line Can be used to style the first line of a text block
::selection Position the text selected by the user

Let's make an example. Suppose you want to make the font size of the first line of a paragraph slightly larger, which is very common in typesetting:

p::first-line {
  font-size: 2rem;
}

Or maybe you want the first letter to be bolder:

p::first-letter {
  font-weight: bolder;
}

::afterwith::beforeNot very intuitive. I remember using them when I had to add icons using CSS.

You specifycontentThis attribute can insert any type of content after or before the element:

p::before {
  content: url(/myimage.png);
}

.myElement::before {
content: “Hey Hey!”;
}

Download mine for freeCSS Manual


More CSS tutorials:


Online technical encyclopedia!