Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
Say goodbye to boring emails. Pseudo-elements add that extra something to your messages with simple styling and interactive options.
If you don't know what pseudoelements are, that's okay.
In this article, we'll start with some basics about pseudo-elements, including syntax and usage, and then show you four different ways you can use pseudo-elements to optimize your emails.
What is a pseudoelement?
A pseudo-element is a keyword added to a CSS selector that allows you to style a specific part of an HTML element, such as a paragraph or heading. Using pseudo-elements, we can change the style for the first letter of a paragraph or insert a button after a paragraph.
For example, we can use a CSS selector p to specify the HTML paragraph element. Then we can add a ::first-line pseudo-element to the CSS selector to format the first line of the paragraph. Read our post to refresh your knowledge of CSS syntax.
Here is a table of all CSS pseudo elements, example usages with a CSS selector p and their uses.
| Pseudoelement | Example | Description |
| ::after | p::after | Adds something to the content of each
element |
| ::before | p::before | Adds something before the content of each
element |
| ::first-letter | p::first-letter | Select the first letter of each
element |
| ::first line | p::first line | Selects the first line of each
element |
| ::Marker | ::Marker | Selects the markers of list items, such as a bullet point or a number. Note that this pseudo-element does not require an HTML selector. |
| ::Selection | ::Selection | Selects the part of an element that a user selects. Note that this pseudo-element does not require an HTML selector. |
In this blog post we focus on three pseudoelements:
- ::first line
- ::first-letter
- ::after
What is the difference between a pseudo-element and a pseudo-class?
When learning about pseudo-elements, you've probably come across the term pseudo-class. But what are they?
A pseudo-class is a keyword added to a CSS selector that defines a special state of the selected HTML element. For example, a pseudo-class like :hover specifies the hover state of a paragraph element and applies stylistic changes, such as changing the font color, when the user hovers over the paragraph.
A pseudo-element, on the other hand, is a keyword added to a CSS selector that applies stylization to a specific part of an element, such as applying CSS to change the first letter of a paragraph element.
We will use the :hover pseudo-class in conjunction with the ::after pseudo-element in some of our following tutorials.
Where do pseudoelements work?
Before we dive into the details, let's look at where the three pseudo-elements we'll use in this tutorial work and where they don't. Each email client supports different types of pseudo-elements, as shown below:
| ::after | ::first line | ::first-letter | |
| Lotus Notes | ✕ | ✕ | ✕ |
| Outlook Desktop | ✕ | ✕ | ✕ |
| Outlook for Mac | ✓ | ✓ | ✓ |
| Thunderbird | ✓ | ✓ | ✓ |
| Samsung Native Mail App | ✓ | ✓ | ✓ |
| Gmail App iOS/Android | ✕ | ✕ | ✕ |
| Apple Mail | ✓ | ✓ | ✓ |
| iOS Mail | ✓ | ✓ | ✓ |
| AOL | ✕ | ✕ | ✕ |
| Gmail | ✕ | ✕ | ✕ |
| Google Apps | ✕ | ✕ | ✕ |
| Outlook.com/Office 365 | ✕ | ✕ | ✕ |
| Yahoo! | ✕ | ✕ | ✕ |
Remember to reconcile this support table with your subscriber base to ensure your users can see the pseudo-elements in your enhanced emails.
What is the syntax for using pseudo-elements?
Now we're ready to go. Let's start by learning the correct syntax for pseudo-elements. Look at the pseudo-element syntax in the following code:
Selector::Pseudoelement { property: value; }
First we enter a selector like
. Then we insert a pseudo-element, such as ::first-line. In the curly brackets {} we enter the property we want to format, such as font-weight, and assign a value to this property, such as bold. With the following code snippet we can make the first line of a paragraph bold:
Example: p::first-line { font-weight: bold; }
If you are familiar with CSS2 and CSS1, you will notice that the original single-colon syntax :first-line has been replaced by the colon notation ::first-line in CSS3. The single-colon syntax is now reserved for pseudo-classes.
Now that we've got those basics out of the way, let's go through four ways pseudo-elements can improve your emails.
1. How do I use the ::first-letter pseudo-element to format emails?
Let's start with something simple. We'll use the ::first-letter pseudo-element to add some style to our emails. This pseudo-element allows us to change the first letter of an HTML element, for example a paragraph:
We do this with the following code:
p::first letter { font-family:Courier, Serif; color:#007700; font-weight:bold; font-size:24px; }
First, we specify the CSS selector p for the paragraph element. Then, we use the ::first-letter pseudo-element to specify that we want to apply the following stylistic changes to the first letter of each paragraph. The content between the curly braces {} specifies the CSS font and text properties we want to apply. In this case, we make the first letter of each paragraph larger, bold, and green.
2. How do I use the ::first-line pseudo-element to format emails?
Just as we can use the ::first-letter pseudo-element to change the first letter of a paragraph, we can use the ::first-line pseudo-element to format the first line of text. This formatting will automatically adjust to the width of the first line, as shown below:
First, we enclosed our text in a div element of the Typography class.
.typography::first-line { font-family:Georgia, serif; font style:italic; font size:24px; line-height:30px;
First, we specify the CSS selector typography that targets the text we've enclosed in a div element above. Then, we use the ::first-line pseudo-element to specify that we want to apply the following stylistic changes to the first line of text. The content between the curly braces {} specifies the CSS font and text properties we want to apply. In this case, we italicize the first line and make it larger so it stands out.
3. How do I use the ::after pseudo-element to create interactive buttons?
Now that we've covered the basics, let's try something a little more sophisticated. Below, we'll show you how to add interactive elements to your emails using the ::after pseudo-element.
That's right, you don't need Javascript to add interactivity to your emails! In fact, we don't recommend using Javascript in email development because it isn't supported in email clients and can be flagged as suspicious activity.
You can use buttons to redirect traffic from your email campaigns to your website. Below, we'll create a button and then apply some styling elements when we hover over the button.
We will start by creating a static button using the following code to create a simple button:
|
|
This will create a static button as shown below.
Next, we'll use the :hover pseudo-class to apply some CSS properties when your user's cursor hovers over the button.
We do this with the following code:
.button-td:hover, .button-a:hover { transition: fade in every 300 ms; background: #333333 !important; border color: #333333 !important; }
In the code above, we tell the button that we want to apply changes when the user hovers over it. We apply CSS properties to change the border and background color with a transition time of 300 milliseconds:
Finally, we use the ::after pseudo-element to add text after the user hovers over the text:
.button-a:hover::after { content: ” >>”; font-size: 13px; text-decoration: none; color: #ffffff; }
The above code tells the button that we want content after the user hovers over the button. We use the content property to add two arrows >> after the current text. We also applied CSS styling for the arrows:
4. How do I use ::after to collect user feedback?
Not only do you want to increase traffic to your website, but you probably also want to collect data about what your email subscribers think about your product. We'll use the ::after pseudo-element to collect user feedback below.
Let’s start with a picture with three smileys:
Next, we use the :hover pseudo-class and ::after pseudo-element to apply CSS properties to the smileys when the user hovers over the icon:
.icon1:hover::after{ content: “Love it!”; } .icon2:hover::after{ content: “Meh!”; } .icon3:hover::after{ content: “Hate it!”;
Like the code for the button tutorial above, here we've used :hover and ::after to add content to the icons when a user hovers over them. We specify the text to display after users hover over an icon in the content property:
We used the ::after pseudo-element in conjunction with the :hover pseudo-class to create interactive icons to capture user feedback.
You can use this as a launching pad to get started, but you'll still need to create a web page that displays a thank you message after collecting feedback for this feature to be fully functional. You'll also need a way to track how many times users click each icon to collect user feedback.
Final thoughts
And that's it! Now you know what pseudo elements are and how you can use them to improve your emails. Before you begin, be sure to check the support table above to make sure pseudo elements are compatible with your subscriber base.
We know how important it is to test any new email development technique before pushing your changes into production. With Email on Acid, you're in the clear. We offer everything from email testing to email analytics, as well as a whole host of practical resources like coding tips and free templates. Sign up today to take your email game to the next level!
This post was updated on February 25, 2022. It was also updated in January 2020 and originally published on December 9, 2016.
Author: The Email on Acid Team
The Email on Acid content team is made up of digital marketers, content creators, and real email geeks. Connect with us on LinkedIn, follow us on Facebook, and tweet us at @EmailonAcid on Twitter for more interesting stuff and great conversations about email marketing.
Create your very own Auto Publish News/Blog Site and Earn Passive Income in Just 4 Easy Steps
