::before and ::after
The ::before and ::after CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the content property to generate cosmetic content.
Overview
The ::before and ::after CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the content property to generate cosmetic content.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 4 | 18 | 3.2 | |
animation and transition support Animation and transition support | 26 | 12 | 4 | 7 | 26 | 7 |
| Other | ||||||
| `::before` | 1 | 12 | 1.5 | 4 | 18 | 3 |
| CSS selector | ||||||
animation and transition support Animation and transition support | 26 | 12 | 4 | 7 | 26 | 7 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :after (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :after (12)
Notes 3 item(s)
Implementation note
- Before Firefox 57, Firefox had a bug where `::after` pseudo-elements were still generated, even if the `content` property value were set to `normal` or `none`.
- Before Firefox 3.5, only the CSS level 2 behavior of `:after` was supported, which disallowed `position`, `float`, `list-style-*` and some `display` properties.
- Previously available under a different name: :after (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :after (4)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :after (18)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :after (3.2)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :before (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :before (12)
Notes 3 item(s)
Implementation note
- Before Firefox 57, Firefox had a bug where `::before` pseudo-elements were still generated, even if the `content` property value were set to `normal` or `none`.
- Before Firefox 3.5, only the CSS level 2 behavior of `:before` was supported, which disallowed `position`, `float`, `list-style-*` and some `display` properties.
- Previously available under a different name: :before (1)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :before (4)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :before (18)
Notes 1 item(s)
Implementation note
- Previously available under a different name: :before (3)
Syntax
CSS
.required-field::after {
content: ' *';
color: red;
}
.quote::before {
content: '\201C';
font-size: 2em;
}Live demo
Use cases
Using ::before and ::after
The ::before and ::after CSS pseudo-elements select inline boxes preceding and following an element. They are often used with the content property to generate cosmetic content.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features