Pseudo-elements

Pseudo-elements

Just like pseudo-classes, pseudo-elements are added to selectors but instead of describing a special state, they allow you to style certain parts of an element. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

Syntax

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

All pseudo-elements

• ::after
• ::before
• ::first-letter
• ::first-line
• ::selection
• ::backdrop
• ::placeholder
• ::marker
• ::spelling-error
• ::grammar-error

Notes

Sometimes you will see double colons (::) instead of just one (:). This is part of CSS3 and an attempt to distinguish between pseudo-classes and pseudo-elements. Most browsers support both values.

You can use only one pseudo-element in a selector. It must appear after the simple selectors in the statement.