While pseudo-classes style the special state of an element, pseudo-elements define the style of the specific element parts, such as first letter, first line or content inserted before or after an element.
Examples
/* style the first letter of every paragraph */
p::first-letter {
color: red;
font-size: 110%;
}
Pseudo-elements
| pseudo-element | Description |
|---|---|
| ::before | used to style and add something before the element's content |
| ::after | used to style and add something after the element's content |
| ::selection | used to style the area of an element selected by the user |
| ::first-letter | sets style of the first letter of the text |
| ::first-line | sets style of the first line of the text |
| ::file-selector-button | represents the button of an input file type |
| ::marker | selects the marker box of a list item (e.g. bullet or number) |
