Definition
A pseudo-element is a CSS feature that targets and styles a specific part of an element, rather than the entire element. Common pseudo-elements in email include ::before (inserts content before an element), ::after (inserts content after), ::first-letter (styles the first letter), and ::first-line (styles the first line).
Pseudo-element support in email clients varies. Apple Mail, iOS Mail, and Samsung Mail support ::before and ::after with content properties. Gmail strips them entirely. Outlook desktop does not support them. Pseudo-elements are best used as progressive enhancements — the email should look complete without them.
Pseudo-Element Support in Email
| Pseudo-Element | Apple Mail | Gmail | Outlook | Yahoo | Samsung Mail |
|---|---|---|---|---|---|
| ::before / ::after | Supported | Not supported | Not supported | Partial | Supported |
| ::first-letter | Supported | Not supported | Supported | Supported | Supported |
| ::first-line | Supported | Not supported | Supported | Supported | Supported |
Best Practices
- Use pseudo-elements only as progressive enhancements with fallback styling
- Never rely on pseudo-element content for critical information
- Test pseudo-element rendering across your audience's top email clients
- Keep pseudo-element CSS simple — complex animations or transforms may break
- Use
::beforeand::afterfor decorative elements like bullets or separators - Provide visible fallback styling that works without pseudo-elements
Was this useful?
Related Glossary Terms
Above the Fold in Email
Above the fold in email refers to the content visible to a recipient before they scroll, a critical area for first impressions and primary calls to action.
Accessible CTA (Email)
An accessible CTA is a button or link coded with sufficient colour contrast, visible focus states, descriptive screen-reader text, and a minimum touch target of 44×44 pixels.
Adaptive Design
Adaptive design in email uses predefined layouts that adjust to specific device or client widths, rather than fluidly resizing to every possible screen.
AI-Generated Content in Email
AI-generated content in email is copy, images, code or subject lines produced by artificial intelligence tools to speed up campaign production and testing.
Alt Text
Alt text is the written alternative to an image in an email, displayed when images are blocked, slow to load, or consumed by screen readers.
Autoplay Video in Email
Autoplay video in email refers to the limited ability to play video content automatically when an email is opened, using specific client-supported techniques.
Frequently Asked Questions
Yes, but only in email clients that support them. Apple Mail and Samsung Mail support `::before` and `::after` well. Gmail, Outlook desktop, and some webmail clients do not. Always design your email so it functions without pseudo-elements — use them as enhancements, not requirements.
Common use cases include decorative quotation marks before blockquotes (`::before`), custom bullet points for lists (`::before`), separator lines between sections (`::after`), and drop cap first letters (`::first-letter`). All of these should enhance rather than constitute the design.