Ditch the boring emails. Pseudo-elements will make your messages pop with simple styling and interactive choices.
For those who 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 other 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 aspect, like a paragraph or a header. With the assistance of pseudo-elements, we are able to change the type for the primary letter of a paragraph or insert a button after a paragraph.
For example, 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 type the primary line of the paragraph. Try 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 listing gadgets, corresponding to a bullet level or quantity. Observe that this pseudo-element doesn’t require an HTML selector. |
| ::choice | ::choice | Selects the portion of a component {that a} person selects. Observe that this pseudo-element doesn’t require an HTML selector. |
On this weblog submit, we’re going to give attention to 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 aspect. For example, 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 person hovers over the paragraph.
Then again, 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 aspect.
We’ll use the :hover pseudo-class at the side of the pseudo-element ::after in a few of our tutorials under.
The place do pseudo-elements work?
Earlier than we dive into the nitty-gritty, let’s take 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 several types of pseudo-elements, as proven under:
| ::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 under:
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 are able to daring the primary line of a paragraph:
Instance:
p::first-line {
font-weight: daring;
}
For those who’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 4 methods pseudo-elements can improve your emails.
1. How do I take advantage of 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 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 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 take advantage of the ::first-line pseudo-element to type 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 type the primary line of some textual content. This styling will routinely alter to the width of the primary line, as proven under:
First, we wrapped our textual content with a div aspect with the class typography, <div class = typography>. That means, we are able to goal our textual content with a pseudo-element. Then, we’ll use the code under:
.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 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 larger 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 attempt one thing a bit more durable. 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 suggest utilizing Javascript in e-mail growth, because it’s not supported in e-mail shoppers and may 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 after 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="middle" type="margin: auto">
<tr>
<td type="border-radius: 3px; background: #666666; text-align: middle;" 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: middle; text-decoration: none; show: block; border-radius: 3px; font-weight: daring;" class="button-a">
<span type="shade:#ffffff;" class="button-link">Learn extra</span>
</a>
</td>
</tr>
</desk>
It will create a static button, as proven under.
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 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 person 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 wish 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 take advantage of ::after to seize person suggestions?
Apart from driving site visitors to your web site, 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 under.
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 at the side of 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 must construct an online web page to show a thanks message after capturing suggestions to make this function absolutely purposeful. You’ll additionally want a technique to trace how typically customers click on every icon to gather person suggestions.
Closing ideas
And that’s it! Now you realize what pseudo-elements are and how one can use them to reinforce your emails. Earlier than you begin, bear in mind to test the assist 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 method earlier than deploying your adjustments to manufacturing. At Electronic mail on Acid, now we have you lined. We provide all the pieces from e-mail testing to e-mail analytics, in addition to an entire bunch of useful sources like coding suggestions and free templates. Enroll right this moment to take your e-mail sport to the subsequent stage!
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 Staff
The Electronic mail on Acid content material workforce 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.
Writer: The Electronic mail on Acid Staff
The Electronic mail on Acid content material workforce 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.
