What are CSS Pseudo-elements? Examples of Their Usage.

CSS pseudo-elements are special selectors used to target specific parts of an element rather than the entire element. They are commonly used to add decorative elements or special effects.

Pseudo-elements begin with the double colon :: and are appended to the end of a selector. For example, ::before and ::after are two commonly used pseudo-elements.

Example Usage

::before and ::after

These pseudo-elements are commonly used to insert content or decorative elements before or after the element's content. This content is inserted via CSS and can be specified using the content property.

css
/* Add decorative quotes before each <p> element */
p::before {
  content: open-quote;
  color: red;
}

/* Add decorative quotes after each <p> element */
p::after {
  content: close-quote;
  color: red;
}

::first-letter

This pseudo-element targets the first letter of text and applies special styling.

css
/* Style the first letter of a paragraph */
p::first-letter {
  font-size: 200%;
  color: blue;
}

::first-line

This pseudo-element targets the first line of text and applies styling.

css
/* Make the first line of a paragraph bold */
p::first-line {
  font-weight: bold;
}

These pseudo-elements offer a powerful way to enhance the visual presentation of web pages without requiring additional HTML markup.