About
Pseudo-elements are element added to selectors to be able to select a sub-content of a content element. See CSS - Addessing model (through selector and properties).
They will also add an element into the flow.
This are not pseudo-class
Syntax
selector::pseudo-element {
property: value;
}
List
Example
first-letter
- The HTML
<p>A first letter pseudo class demo where the first letter A will get a bigger font-size</p>
- The CSS that selects the first letter of paragraphs and applies:
- and an aqua border to see the pseud element.
p::first-letter {
font-size: 1.5rem;
border:1px solid aqua;
}
- Result:
before / after
See the content property for before and after pseudo-element example.