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
Related Glossary Terms
Dark Mode
Dark mode in email refers to how email clients render messages when the recipient has dark mode enabled. It affects colour display, image rendering, and readability. Designers use CSS media queries and hybrid coding techniques to control the dark mode appearance.
Drag-and-Drop Email Editor
A drag-and-drop email editor is a visual interface that allows marketers to build email layouts by dragging content blocks into place without writing HTML or CSS code.
Email Accessibility Guidelines
Email accessibility guidelines ensure emails are usable by people with disabilities, following WCAG standards for screen readers, colour contrast, keyboard navigation, and readable content.
Email Accessibility
Email accessibility ensures marketing emails are usable by people with disabilities, including those using screen readers, keyboard navigation, or assistive technologies. It follows WCAG 2.1 guidelines for structure, contrast, semantics, and descriptive content.
Attachment
An email attachment is a file sent along with an email message — while common in personal and business correspondence, attachments are generally discouraged in marketing emails due to security, deliverability, and compatibility concerns.
Email Body
The email body is the main content area of an email message, containing the visible text, images, and structural elements that communicate the message to the recipient.
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.