Describe pseudo-elements and discuss what they are used for.
Topics
CSS
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-line, ::first-letter) or for adding elements to the markup (combined with content: ...) without having to modify the markup itself (::before, ::after).
::first-lineand::first-lettercan be used to decorate text.- Used in the
.clearfixhack to add a zero-space element withclear: both. - Triangular arrows in tooltips use
::beforeand::after. This encourages separation of concerns because the triangle is considered part of styling and not really the DOM.
Notes
- Pseudo-elements are different from pseudo-classes, which are used to style an element based on its state (such as
:hover,:focus, etc.).
Prefer double colons for pseudo-elements
Double colons (::before) should be used instead of a single colon (:before) to distinguish pseudo-classes from pseudo-elements. Most browsers support both syntaxes since this distinction was not clear in legacy W3C specs.