Bugl — Daily coding puzzles and drills

CSS Pseudo-Elements

Formula

A CSS pseudo - element is a keyword that can be added to a selector, to style a specific part of an element.

Style the first letter or first line, of an element

Formula

Pseudo - elements are denoted by a double colon (::) followed by the pseudo - element name:

selector::pseudo-element-name {

Formula

Text pseudo - elements style specific parts of text content:
::first - line

Formula

::first - letter

Formula

Content pseudo - elements insert or style generated content:

::before - Insert content before an element ::after - Insert content after an element ::marker - Style list item markers ::selection

Formula

- Style user - selected text

::backdrop - Style dialog backdrop

Formula

For a complete list of all CSS Pseudo - elements, visit our
CSS Pseudo - elements Reference.