Selector- Pseudo-selector (Pseudo-element)
Table of Contents
1 - About
Pseudo-elements are 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.
2 - Articles Related
3 - Syntax
selector::pseudo-element {
property: value;
}
4 - List
- :first-letter
- ::before See content property
- ::after See content property
5 - Example
Below the pseudo element has an aqua border.
p::before{
content: "What ever ... ";
display: inline;
border:1px solid aqua;
}
<p>This text will have "What ever" with an aqua border at its beginning</p>