CSS pseudo-elements allow you to style specific parts of an element’s content. Here’s a comprehensive list of commonly used CSS pseudo-elements:
::after
Inserts content after an element’s content.
p::after {
content: " after";
}
::before
Inserts content before an element’s content.
p::before {
content: "before ";
}
::first-letter
Styles the first letter of an element.
p::first-letter {
font-size: 2em;
}
::first-line
Styles the first line of an element.
p::first-line {
font-weight: bold;
}
::selection
Styles the portion of an element that has been highlighted by the user (selected).
::selection {
background: yellow;
}
::backdrop
Styles the background of a modal element.
dialog::backdrop {
background: rgba(0, 0, 0, 0.8);
}
::placeholder
Styles the placeholder text of an input element.
input::placeholder {
color: gray;
}
::marker
Styles the marker box of a list item.
li::marker {
color: red;
}
::cue
Styles WebVTT cues.
::cue {
color: white;
background: black;
}
::cue-region
Styles regions containing WebVTT cues.
::cue-region {
background: rgba(0, 0, 0, 0.5);
}
::slotted
Styles elements that are assigned to a slot inside a shadow DOM.
::slotted(span) {
color: blue;
}
::spelling-error
Styles text that has a spelling error in browser spell-checking.
::spelling-error {
text-decoration: underline red wavy;
}
::grammar-error
Styles text that has a grammar error in browser spell-checking.
::grammar-error {
text-decoration: underline green wavy;
}
::part()
Styles parts of an element defined with the part
attribute.
::part(header) {
background: lightblue;
}
These headings provide a structured way to understand and reference the different CSS pseudo-elements.