A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). They can be used for decoration (
::first-letter) or adding elements to the markup (combined with
content: ...) without having to modify the markup (
::first-lettercan be used to decorate text.
- Used in the
.clearfixhack as shown above to add a zero-space element with
- Triangular arrows in tooltips use
::after. Encourages separation of concerns because the triangle is considered part of styling and not really the DOM.
- Pseudo-elements are different from pseudo-classes, which are used to style an element based on its state (such as
- Double colons should be used instead of single colon to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxs since this distinction was not clear in legacy W3C specs.