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 <p> element
::beforep::beforeInsert something before the content of each <p> element
::first-letterp::first-letterSelects the first letter of each <p> element
::first-linep::first-lineSelects the first line of each <p> element
::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

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee
Your subscription could not be saved. Please try again.
Your subscription has been successful.


Subscribe to our newsletter and stay updated.

Leave a Comment