::before and ::after
The ::before and ::after pseudo-elements insert generated content as the first or last child of an element.
Syntax
selector::before { content: '; }Examples
.required::after {
content: ' *';
color: crimson;
}
.quote::before { content: '“'; }
Output
Appends a red asterisk after required labels and prepends a curly opening quote to .quote.
Notes
The content property is mandatory (use content:'' for purely decorative shapes). Generated content is not reliably read by assistive tech, so it must not carry essential information. They do not apply to replaced elements like <img>.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 4.0 |
| firefox | 3.5 |
| safari | 4.0 |
| edge | 12 |