CSS Pseudo-elements

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

For example, it can be used to:

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

Here are the list of CSS pseudo elements

SelectorExampleExample description
::afterp::afterInsert something after the content of each


::beforep::beforeInsert something before the content of each


::first-letterp::first-letterSelects the first letter of each


::first-linep::first-lineSelects the first line of each


::marker::markerSelects the markers of list items
::selectionp::selectionSelects the portion of an element that is selected by a user


See the Pen pseudo elements by Arpit (@soniarpit) on CodePen.

Previous: CSS Pseudo Class