Ditch the boring emails. Pseudo-elements will make your messages pop with simple styling and interactive choices.
In case you don’t know what pseudo-elements are, that’s alright.
On this article, we’ll begin with some pseudo-element fundamentals, together with syntax and usages. Then, we’ll take you thru 4 alternative ways to make use of pseudo-elements to superpower your emails.
What’s a pseudo-element?
A pseudo-element is a key phrase added to a CSS selector that you need to use to fashion a particular a part of an HTML aspect, like a paragraph or a header. With the assistance of pseudo-elements, we will change the fashion for the primary letter of a paragraph or insert a button after a paragraph.
As an illustration, we will use a CSS selector p to specify the HTML paragraph aspect. Then, we will add a ::first-line pseudo-element to the CSS selector to fashion the primary line of the paragraph. Try our publish for a refresher on CSS syntax.
Right here’s a desk of all CSS pseudo-elements, instance usages with a CSS selector p, and their makes use of.
| Pseudo-element | Instance | Description |
| ::after | p::after | Inserts one thing after the content material of every <p> aspect |
| ::earlier than | p::earlier than | Inserts one thing earlier than the content material of every <p> aspect |
| ::first-letter | p::first-letter | Selects the primary letter of every <p> aspect |
| ::first-line | p::first-line | Selects the primary line of every <p> aspect |
| ::marker | ::marker | Selects the markers of listing gadgets, akin to a bullet level or quantity. Word that this pseudo-element doesn’t require an HTML selector. |
| ::choice | ::choice | Selects the portion of a component {that a} consumer selects. Word that this pseudo-element doesn’t require an HTML selector. |
On this weblog publish, we’re going to concentrate on three pseudo-elements:
- ::first-line
- ::first-letter
- ::after
What’s the distinction between a pseudo-element and a pseudo-class?
You’ve most likely come throughout the time period pseudo-class whereas studying about pseudo-elements. However what are they?
A pseudo-class is a key phrase added to a CSS selector that defines a particular state of the chosen HTML aspect. As an illustration, a pseudo-class like :hover specifies the hover state of a paragraph aspect and applies stylistic adjustments, like altering the colour of the font when the consumer hovers over the paragraph.
Then again, a pseudo-element is a key phrase added to a CSS selector that applies styling to a particular a part of a component, akin to making use of CSS to alter the primary letter of a paragraph aspect.
We’ll use the :hover pseudo-class along side the pseudo-element ::after in a few of our tutorials beneath.
The place do pseudo-elements work?
Earlier than we dive into the nitty-gritty, let’s have a look at the place the three pseudo-elements we’ll use on this tutorial do and don’t work. Every e mail consumer helps various kinds of pseudo-elements, as proven beneath:
| ::after | ::first-line | ::first-letter | |
| Lotus Notes | ✕ | ✕ | ✕ |
| Outlook Desktop | ✕ | ✕ | ✕ |
| Outlook Mac | ✓ | ✓ | ✓ |
| Thunderbird | ✓ | ✓ | ✓ |
| Samsung Native Mail app | ✓ | ✓ | ✓ |
| Gmail App iOS/Android | ✕ | ✕ | ✕ |
| Apple Mail | ✓ | ✓ | ✓ |
| iOS Mail | ✓ | ✓ | ✓ |
| AOL | ✕ | ✕ | ✕ |
| Gmail | ✕ | ✕ | ✕ |
| Google Apps | ✕ | ✕ | ✕ |
| Outlook.com/Workplace 365 | ✕ | ✕ | ✕ |
| Yahoo! | ✕ | ✕ | ✕ |
Bear in mind to cross-reference this assist desk with your subscriber base to verify your customers can see the pseudo-elements in your enhanced emails.
What’s the syntax for utilizing pseudo-elements?
Now we’re able to dive in. Let’s begin by studying the right syntax for pseudo-elements. Try the pseudo-element syntax within the code beneath:
selector::pseudoelement {
property: worth;
}
First, we enter a selector, like <p>. Then we enter a pseudo-element, like ::first-line. Throughout the curly braces {} we enter the property we need to fashion, like font-weight and assign a worth to this property, like daring. With the next code snippet, we will daring the primary line of a paragraph:
Instance:
p::first-line {
font-weight: daring;
}
In case you’re aware of CSS2 and CSS1, you’ll discover that the unique single-colon syntax :first-line was changed with the double-colon notation ::first-line in CSS3. The only-colon syntax is now reserved for pseudo-classes.
With these fundamentals out of the best way, we’ll stroll by means of 4 methods pseudo-elements can improve your emails.
1. How do I take advantage of the ::first-letter pseudo-element to fashion emails?
Let’s begin with one thing easy. We’ll use the ::first-letter pseudo-element so as to add some fashion to our emails. This pseudo-element lets us change the primary letter of an HTML aspect, like a paragraph:
We’ll do that with the next code:
p::first-letter {
font-family:Courier, serif;
colour:#007700;
font-weight:daring;
font-size:24px;
}
First, we specify the CSS selector p for the paragraph aspect. Then, we use the pseudo-element ::first-letter to specify that we need to apply the next stylistic adjustments to the primary letter of every paragraph. The content material between the curly braces {} specify the CSS font and textual content properties we need to apply. On this case, we’re making the primary letter of every paragraph bigger, daring, and inexperienced.
2. How do I take advantage of the ::first-line pseudo-element to fashion emails?
Simply as we will use the ::first-letter pseudo-element to alter the primary letter of a paragraph, we will use the ::first-line pseudo-element to fashion the primary line of some textual content. This styling will robotically modify to the width of the primary line, as proven beneath:
First, we wrapped our textual content with a div aspect with the class typography, <div class = typography>. That approach, we will goal our textual content with a pseudo-element. Then, we’ll use the code beneath:
.typography::first-line {
font-family:Georgia, serif;
font-style:italic;
font-size:24px;
line-height:30px;
First, we specify the CSS selector typography to focus on the textual content we’ve wrapped in a div aspect above. Then, we use the pseudo-element ::first-line to specify that we need to apply the next stylistic adjustments to the primary line of the textual content. The content material between the curly braces {} specify the CSS font and textual content properties we need to apply. On this case, we’re italicizing the primary line and making it greater to make it pop.
3. How do I take advantage of the ::after pseudo-element create interactive buttons?
Now that we’ve tackled the fundamentals, let’s strive one thing a bit tougher. Under, we’ll undergo how you need to use the ::after pseudo-element so as to add interactive parts to your emails.
That’s proper, you don’t want Javascript so as to add interactivity to your emails! The truth is, we don’t advocate utilizing Javascript in e mail improvement, because it’s not supported in e mail shoppers and could be flagged as suspicious exercise.
You need to use buttons to redirect site visitors out of your e mail campaigns to your web site. Under, we’ll create a button after which apply some styling once we hover over the button.
We’ll begin by making a static button with the next code to create a primary button:
<desk position="presentation" cellspacing="0" cellpadding="0" border="0" align="heart" fashion="margin: auto">
<tr>
<td fashion="border-radius: 3px; background: #666666; text-align: heart;" class="button-td">
<a href="http://www.google.com" fashion="background: #666666; border: 15px stable #666666; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: heart; text-decoration: none; show: block; border-radius: 3px; font-weight: daring;" class="button-a">
<span fashion="colour:#ffffff;" class="button-link">Learn extra</span>
</a>
</td>
</tr>
</desk>
It will create a static button, as proven beneath.
Subsequent, we’ll use the pseudo-class :hover to use some CSS properties when your customers’ cursor hovers over the button.
We’ll do that with the next code:
.button-td:hover,
.button-a:hover {
transition: all 300ms ease-in;
background: #333333 !vital;
border-color: #333333 !vital;
}
Within the code above, we inform the button that we need to apply adjustments when the consumer hovers over it. We apply CSS properties to alter border and background colour with a transition time of 300 milliseconds:
Lastly, we’ll use the ::after pseudo-element so as to add some textual content after the consumer hovers over the textual content:
.button-a:hover::after {
content material: " >>";
font-size:13px;
text-decoration: none;
colour:#ffffff;
}
The code above tells the button that we wish content material after the consumer hovers over the button. We use the content material property so as to add two arrows >> after the present textual content. We’ve additionally utilized CSS styling for the arrows:
4. How do I take advantage of ::after to seize consumer suggestions?
Apart from driving site visitors to your website, you most likely need to acquire knowledge in your e mail subscribers’ emotions about your product. We’ll use the ::after pseudo-element to seize consumer suggestions beneath.
Let’s begin with a picture with three smileys:
Subsequent, we’ll use the :hover pseudo-class and the ::after pseudo-element apply CSS properties to the smileys when the consumer hovers over the icon:
.icon1:hover::after{
content material: "Find it irresistible!";
}
.icon2:hover::after{
content material: "Meh!";
}
.icon3:hover::after{
content material: "Hate it!";
Just like the code for the button tutorial above, right here we used :hover and ::after so as to add content material to the icons when a consumer hovers over them. We specify within the content material property the textual content we need to show after customers hover over an icon:
We used the ::after pseudo-element along side the :hover pseudo-class to create interactive icons to seize consumer suggestions.
You need to use this as a launchpad to get began, however you’ll nonetheless have to construct an internet web page to show a thanks message after capturing suggestions to make this function absolutely purposeful. You’ll additionally want a way to trace how usually customers click on every icon to gather consumer suggestions.
Ultimate ideas
And that’s it! Now you already know what pseudo-elements are and easy methods to use them to boost your emails. Earlier than you begin, keep in mind to test the assist desk above to verify pseudo-elements are appropriate together with your subscriber base.
We all know how vital it’s to check any new email-development approach earlier than deploying your adjustments to manufacturing. At E-mail on Acid, now we have you coated. We provide every part from e mail testing to e mail analytics, in addition to an entire bunch of useful sources like coding ideas and free templates. Enroll as we speak to take your e mail sport to the following degree!
This publish was up to date on February twenty fifth, 2022. It was additionally up to date in January of 2020 and initially printed on December ninth, 2016.
Creator: The E-mail on Acid Crew
The E-mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.
Creator: The E-mail on Acid Crew
The E-mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.
Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.
