CSS Pseudo-Elements

Pseudo-elements in CSS, are used when we need to style some part of an element. Here is the syntax of pseudo-element in CSS:

selector::pseudoElement {declaration;}

Important - Note the double colons (::)

For example, to style the first letter of a paragraph, use the following CSS code:

p::first-letter {color: purple; font-weight: bold; font-size: 28px;}

List of All Pseudo-Elements in CSS

  • ::before - used to add content before the content of selected element
  • ::after - used to add content after the content of selected element
  • ::first-letter - used to style the first letter of selected element
  • ::first-line - used to style the first line of selected element
  • ::marker - used to style the marker of organized and unorganized list items
  • ::selection - used to change the default style of selected portion

CSS Online Test


« Previous Tutorial Next Tutorial »