Describe pseudo-elements and discuss what they are used for.

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 adding elements to the markup (combined with content: ...) without having to modify the markup (:before, :after).

• ::first-line and ::first-letter can be used to decorate text.
• Used in the .clearfix hack as shown above to add a zero-space element with clear: both.
• Triangular arrows in tooltips use ::before and ::after. 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).
• 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.

References

• Pseudo-elements - CSS | MDN
• Front End Interview Handbook