Pseudo-element · data last changed 10 Nov 2026
::before in email clients
Works in 6 of 21. Not supported in Gmail, Gmail Android, Gmail iOS and 7 more. Partial in Outlook 365, Outlook (New), Outlook iOS and 1 more. Untested in Superhuman.
Your reader in Outlook Classic sees the email without ::before, even if it looks right where you tested it.
caniemail (MIT) via @emailens/engine 0.18.22
What to do instead in Outlook Classic
Never use ::before for critical content, iconography, or essential spacing. Place icons and decorative symbols directly in the HTML markup using inline <span> elements or small <img> tags. If using ::before for progressive enhancement, ensure the layout remains visually complete when the pseudo-element is omitted.
There is no drop-in fix for ::before in Outlook Classic. Design so the email still reads without it.
No signup · Five clients free, Outlook Classic included · All 21 with an account
The checker needs a computer screen.
A free account opens all 21 clients and keeps your checks for 7 days. Create a free account →
Every account includes one free real-device check in classic Outlook, Outlook for Mac and Apple Mail, after you verify your email and run one preview, while this month's free capacity lasts. How real-device checks work →
::before is not among the 24 features we have screenshotted on real installs. The ones we have →
All 21 clients, problems first
| Client | Support |
|---|---|
| Gmail | Not supported |
| Gmail Android | Not supported |
| Gmail iOS | Not supported |
| Outlook Classic | Not supported |
| Outlook Android | Not supported |
| Yahoo Mail | Not supported |
| Yahoo Mail Android | Not supported |
| Yahoo Mail iOS | Not supported |
| Proton Mail | Not supported |
| AOL Mail | Not supported |
| Outlook 365 | Partial See caveat 1 |
| Outlook (New) | Partial See caveat 1 |
| Outlook iOS | Partial See caveat 1 |
| Outlook for Mac | Partial See caveat 2 |
| Superhuman | Untested |
Works in 6: Apple Mail, Apple Mail iOS, Samsung Mail and 3 more. Show all
| Client | Support |
|---|---|
| Apple Mail | Works |
| Apple Mail iOS | Works |
| Samsung Mail | Works |
| Thunderbird | Works |
| HEY Mail | Works |
| Fastmail | Works |
Caveats (2)
- 1. Outlook 365, Outlook (New), Outlook iOS: Partial. Only supported on type selectors.
- 2. Outlook for Mac: Not supported with non Outlook accounts. Partial. Only supported on type selectors.
Caveats as recorded by caniemail (MIT), one entry per wording.
How ::before behaves
The CSS ::before pseudo-element inserts decorative generated content before an element's children using the content property. In email development, it is frequently attempted for decorative bullets, quotation marks, badges, or icon prefixes, but support is severely limited outside WebKit-based clients.
- Outlook 2007 through 2024 on Windows completely ignores ::before and all generated content properties.
- Gmail web and mobile strip ::before and ::after rules during CSS sanitization, leaving the generated content invisible.
- Outlook 365 and Outlook iOS offer partial support: they honor ::before on type selectors (e.g., p::before), but strip it on class or ID selectors.
- Apple Mail (macOS, iOS) and Thunderbird fully support ::before, rendering generated strings and inline styling reliably.
Questions
Why doesn't ::before work in Gmail?
Gmail's CSS sanitizer removes pseudo-element selectors (::before, ::after) from <style> blocks to ensure predictable layout and prevent spoofing of content.
How can I add icon bullets without ::before in email?
Use a two-column table: put the icon image or Unicode character in the left <td> with fixed width, and the text in the right <td>.
Your next question
- Does ::first-letter work in Outlook Classic?
Works in 10 of 21 · partial in 4 · not supported in 6 · 1 untested
- Does ::first-line work in Outlook Classic?
Works in 10 of 21 · partial in 4 · not supported in 6 · 1 untested
- Does ::marker work in Outlook Classic?
Works in 10 of 21 · not supported in 10 · 1 untested
- Does ::placeholder work in Outlook Classic?
Works in 9 of 21 · partial in 4 · not supported in 7 · 1 untested
- Does ::after work in Outlook Classic?
Works in 6 of 21 · partial in 4 · not supported in 10 · 1 untested
- Does word-break work in Outlook Classic?
Works in 4 of 21 · partial in 12 · not supported in 5
fix
Every feature in Outlook Classic · All email CSS features · What real installs show
Paste your email
Get new email CSS fixes by email.