::before and ::after
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
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
In CSS, ::after creates a pseudo-element that is the last child of the selected element.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.