Ditch the boring emails. Pseudo-elements will make your messages pop with simple styling and interactive choices.
Should 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 should use to type a selected a part of an HTML component, like a paragraph or a header. With the assistance of pseudo-elements, we will change the type 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 component. Then, we will add a ::first-line pseudo-element to the CSS selector to type the primary line of the paragraph. Take a look at 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> component |
| ::earlier than | p::earlier than | Inserts one thing earlier than the content material of every <p> component |
| ::first-letter | p::first-letter | Selects the primary letter of every <p> component |
| ::first-line | p::first-line | Selects the primary line of every <p> component |
| ::marker | ::marker | Selects the markers of listing objects, corresponding 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} person selects. Be aware that this pseudo-element doesn’t require an HTML selector. |
On this weblog publish, we’re going to deal with three pseudo-elements:
- ::first-line
- ::first-letter
- ::after
What’s the distinction between a pseudo-element and a pseudo-class?
You’ve in all probability 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 component. As an illustration, a pseudo-class like :hover specifies the hover state of a paragraph component and applies stylistic adjustments, like altering the colour of the font when the person hovers over the paragraph.
However, a pseudo-element is a key phrase added to a CSS selector that applies styling to a selected a part of a component, corresponding to making use of CSS to alter the primary letter of a paragraph component.
We’ll use the :hover pseudo-class along with 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 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 correct 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 wish to type, 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;
}
Should you’re accustomed to 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 way in which, we’ll stroll via 4 methods pseudo-elements can improve your emails.
1. How do I exploit the ::first-letter pseudo-element to type emails?
Let’s begin with one thing easy. We’ll use the ::first-letter pseudo-element so as to add some type to our emails. This pseudo-element lets us change the primary letter of an HTML component, 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 component. Then, we use the pseudo-element ::first-letter to specify that we wish 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 wish 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 type 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 type the primary line of some textual content. This styling will mechanically regulate to the width of the primary line, as proven beneath:
First, we wrapped our textual content with a div component with the class typography, <div class = typography>. That manner, 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 component above. Then, we use the pseudo-element ::first-line to specify that we wish 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 wish 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 attempt one thing a bit tougher. Under, we’ll undergo how you should 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! In reality, we don’t advocate utilizing Javascript in e mail growth, because it’s not supported in e mail shoppers and might be flagged as suspicious exercise.
You should utilize 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 fundamental button:
<desk position="presentation" cellspacing="0" cellpadding="0" border="0" align="heart" type="margin: auto">
<tr>
<td type="border-radius: 3px; background: #666666; text-align: heart;" class="button-td">
<a href="http://www.google.com" type="background: #666666; border: 15px strong #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 type="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 !essential;
border-color: #333333 !essential;
}
Within the code above, we inform the button that we wish to apply adjustments when the person 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 person 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 would like content material after the person 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 person suggestions?
Moreover driving site visitors to your website, you in all probability wish to gather knowledge in your e mail subscribers’ emotions about your product. We’ll use the ::after pseudo-element to seize person 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 person 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 person hovers over them. We specify within the content material property the textual content we wish to show after customers hover over an icon:
We used the ::after pseudo-element along with the :hover pseudo-class to create interactive icons to seize person suggestions.
You should utilize 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 characteristic absolutely practical. You’ll additionally want a technique to trace how typically customers click on every icon to gather person suggestions.
Ultimate ideas
And that’s it! Now what pseudo-elements are and easy methods to use them to reinforce your emails. Earlier than you begin, keep in mind to test the help desk above to verify pseudo-elements are suitable along with your subscriber base.
We all know how essential 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 little thing from e mail testing to e mail analytics, in addition to an entire bunch of helpful sources like coding ideas and free templates. Join right this moment to take your e mail sport to the subsequent stage!
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 Workforce
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, observe 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 Workforce
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, observe us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.
