What are pseudo-elements in CSS?

CSS pseudo-elements are used to style a specific part of an element. They allow you to apply styles to content that doesn't explicitly exist in the document tree, or to parts of elements that are not directly targetable with simple selectors.

What are Pseudo-elements?

Pseudo-elements are like 'virtual' elements that are created and styled by CSS. Unlike pseudo-classes (which select elements based on their state, like :hover or :focus), pseudo-elements target a specific part of an element. For instance, you can use a pseudo-element to style the first letter of a paragraph, insert content before or after an element, or style the part of a text that has been selected by the user.

Common Pseudo-elements and Their Uses

::before and ::after

These are perhaps the most frequently used pseudo-elements. They are used to insert content before or after the content of an element. The inserted content is inline by default and can be styled like any other element. They require a 'content' property to display anything.

p::before {
  content: "Note: ";
  font-weight: bold;
  color: blue;
}

a::after {
  content: " (" attr(href) ")"; /* Inserts the href attribute value */
  font-size: 0.8em;
  color: gray;
}

::first-line

The ::first-line pseudo-element is used to apply styles to the first line of a block-level element. The length of the first line depends on many factors, like the width of the element, the width of the document, and the font size of the text. When the user resizes the window, the first line will reflow, and the styles will adjust accordingly.

p::first-line {
  font-weight: bold;
  font-variant: small-caps;
}

::first-letter

The ::first-letter pseudo-element is used to apply styles to the first letter of the first line of a block-level element. It's commonly used to create 'drop cap' effects.

p::first-letter {
  font-size: 2em;
  color: #c00;
  float: left;
  margin-right: 0.1em;
}

::selection

The ::selection pseudo-element allows you to apply styles to the portion of an element that is highlighted by a user (e.g., when they select text with a mouse). Only a limited set of CSS properties can be applied: color, background-color, cursor, caret-color, and outline.

::selection {
  background-color: #ff9900;
  color: white;
}

Syntax

The CSS Working Group introduced the double-colon (::) syntax for pseudo-elements to differentiate them from pseudo-classes, which use a single colon (:). While modern browsers support both single and double colon syntax for older pseudo-elements like ::before, it's best practice to use the double colon for new code to ensure clear distinction and forward compatibility.

selector::pseudo-element {
  property: value;
}

Key Takeaways

• Pseudo-elements style specific parts of an element, not the element as a whole.
• They often target content not explicitly present in the HTML DOM.
• Common examples include ::before, ::after, ::first-line, ::first-letter, and ::selection.
• Use the double-colon (::) syntax for pseudo-elements for clarity and best practice.