Ditch the boring emails. Pseudo-elements will make your messages pop with simple styling and interactive choices.
In the event 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 selected a part of an HTML aspect, like a paragraph or a header. With the assistance of pseudo-elements, we are able to change the fashion for the primary letter of a paragraph or insert a button after a paragraph.
As an illustration, we are able to use a CSS selector p to specify the HTML paragraph aspect. Then, we are able to add a ::first-line pseudo-element to the CSS selector to fashion the primary line of the paragraph. Take a look at our submit 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 record objects, akin to a bullet level or quantity. Be aware that this pseudo-element doesn’t require an HTML selector. |
| ::choice | ::choice | Selects the portion of a component {that a} consumer selects. Be aware that this pseudo-element doesn’t require an HTML selector. |
On this weblog submit, 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 modifications, like altering the colour of the font when the consumer hovers over the paragraph.
Alternatively, a pseudo-element is a key phrase added to a CSS selector that applies styling to a selected 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 electronic mail shopper helps several types 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! | ✕ | ✕ | ✕ |
Keep in mind to cross-reference this help 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. Take a look at 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. Inside 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 are able to daring the primary line of a paragraph:
Instance:
p::first-line {
font-weight: daring;
}
In the event you’re acquainted with 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 one-colon syntax is now reserved for pseudo-classes.
With these fundamentals out of the way in which, we’ll stroll by 4 methods pseudo-elements can improve your emails.
1. How do I exploit 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;
shade:#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 modifications 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 exploit the ::first-line pseudo-element to fashion emails?
Simply as we are able to use the ::first-letter pseudo-element to alter the primary letter of a paragraph, we are able to use the ::first-line pseudo-element to fashion the primary line of some textual content. This styling will robotically regulate 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 method, we are able to 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 modifications 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 exploit the ::after pseudo-element create interactive buttons?
Now that we’ve tackled the fundamentals, let’s strive one thing a bit tougher. Beneath, we’ll undergo how you need to use the ::after pseudo-element so as to add interactive components to your emails.
That’s proper, you don’t want Javascript so as to add interactivity to your emails! In reality, we don’t advocate utilizing Javascript in electronic mail growth, because it’s not supported in electronic mail purchasers and could be flagged as suspicious exercise.
You need to use buttons to redirect visitors out of your electronic mail campaigns to your web site. Beneath, we’ll create a button after which apply some styling after we hover over the button.
We’ll begin by making a static button with the next code to create a primary button:
<desk function="presentation" cellspacing="0" cellpadding="0" border="0" align="middle" fashion="margin: auto">
<tr>
<td fashion="border-radius: 3px; background: #666666; text-align: middle;" class="button-td">
<a href="http://www.google.com" fashion="background: #666666; border: 15px strong #666666; font-family: sans-serif; font-size: 13px; line-height: 1.1; text-align: middle; text-decoration: none; show: block; border-radius: 3px; font-weight: daring;" class="button-a">
<span fashion="shade:#ffffff;" class="button-link">Learn extra</span>
</a>
</td>
</tr>
</desk>
This may 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 !essential;
border-color: #333333 !essential;
}
Within the code above, we inform the button that we need to apply modifications when the consumer hovers over it. We apply CSS properties to alter border and background shade 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;
shade:#ffffff;
}
The code above tells the button that we would like 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 exploit ::after to seize consumer suggestions?
Apart from driving visitors to your web site, you most likely need to acquire information in your electronic 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: "Like it!";
}
.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 totally purposeful. You’ll additionally want a technique to trace how typically customers click on every icon to gather consumer suggestions.
Remaining ideas
And that’s it! Now you recognize what pseudo-elements are and easy methods to use them to boost your emails. Earlier than you begin, keep in mind to examine the help desk above to verify pseudo-elements are appropriate together with your subscriber base.
We all know how essential it’s to check any new email-development method earlier than deploying your modifications to manufacturing. At Electronic mail on Acid, we’ve you coated. We provide every little thing from electronic mail testing to electronic mail analytics, in addition to an entire bunch of helpful sources like coding suggestions and free templates. Enroll immediately to take your electronic mail sport to the subsequent degree!
This submit was up to date on February twenty fifth, 2022. It was additionally up to date in January of 2020 and initially revealed on December ninth, 2016.
Writer: The Electronic mail on Acid Crew
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising and marketing.
Writer: The Electronic mail on Acid Crew
The Electronic mail on Acid content material group is made up of digital entrepreneurs, content material creators, and straight-up electronic mail geeks.
Join with us on LinkedIn, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on electronic mail advertising and marketing.
