::before and ::after on CSS - Guide For Beginners
Adding elements without altering the HTML? Empty content string? Let's learn more about it!
You're probably wondering, what are Pseudo-elements?
They are used to style specific parts of an element without the need of altering the HTML document. They can also help create more complex shapes and help making our animations more visually pleasing, like this one you'll learn how to do later on this article!
But first let's learn the syntax and what ::before and ::after pseudo-elements actually do?
::before and ::after
These pseudo-elements allow you to insert elements or 'content' positionally before or after an element in the HTML, appearing on the page as it is.
The syntax is:
selector::before{
...your style...
}
selector::after{
...your style...
}
Where selector is the HTML element you'd like to apply that to. Let's insert an emoji ::before our h1:
<body>
<h1> Hello! I'm a heading </h1>
</body>
Our CSS would look like this:
body{
display: flex;
align-items: center;
justify-content: center;
}
h1::before{
content: '🍉';
}
Will result in this:
Quite fun, isn't it?! Now i feel like it's only right for us to add another one ::after
h1::before{
content: '🍉';
}
h1::after{
content:'🍓';
}
That's better! But there are a couple of things you need to know before adding 'content'.
The most important thing to know is that content is required.
What can i add on 'content' ?
- A string.
content: 'string'; - An image but it cannot be resized.
content: url(image.jpg); Can actually hold nothing! An empty string " ". Specially useful when making shapes, since it's required.
content: " ";⚠️You CAN'T add HTML to the content.
⛔ DON'T do this:
content: "<h1> Just don't </h1>";
Now, let's see how can the pseudo-elements help us with animations!
Animations with pseudo-elements
Let's make the heart you saw earlier!
Our HTML has to look like this:
<body>
<div class= "back"> </div>
<div class= "heart"></div>
</body>
Now the fun part, our CSS!
We're going to need to make our heart first! So let's build the bottom part first.
.heart {
position: absolute;
margin: auto;
top:0;
right: 0;
bottom: 0;
left: 0;
background-color: rgb(255, 192, 203);
height: 50px;
width: 50px;
transform:rotate(-45deg);
}
And now we have this:
I know, i know, but trust the process!!
Now let's work on the left side of our heart, let's make a circle for it using ::before, remember how it's positionally?.
.heart::before {
background-color: rgb(255, 192, 203);
content: ""; /**remember content can be an empty string**/
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
}
Look how pretty it looks now, our half heart!
I think you can figure out what's next... Let's add the right part using ::after:
.heart::after {
background-color: rgb(255, 192, 203);
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
Beautiful!! Now we need to animate it!! We're going to use @ keyframes for that:
We need to build our animations first:
@keyframes background {
50% {
background: #ffe6f2;
}
}
@keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
}
Now all we have to do is to add it to our .back and .heart!
On .back we add the background animation:
animation-name: background;
animation-duration: 1s;
animation-iteration-count: infinite;
And what we have left is to add the beat animation on .heart:
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
Now we should have a full functioning animation!
Conclusion
Pseudo-elements like ::before and ::after can be quite useful for both animations and adding fun and useful elements (content) to our HTML. It's important to mention that text inserted like this can sometimes be picked up by screen readers but it can also NOT be and we should always have accessiblity in mind when building websites and webapps.
Thank you so much for reading!! :)
Don't hesitate to contact me and let me know what you think in the comments!
☕If you enjoy my content Buy me a coffee It'll help me continue making quality blogs💕
💙Follow me on Twitter to know more about my self-taught journey!
💜Make sure to check out more upcoming articles on my Web Design for Beginners Series
❤️ Also subscribe to my Youtube Channel !
🖤And for more content and tips on TikTok !
💛This is also part of the Technical Writer Journey Series! Check that one out too.