Hello everyone! Hope u r doing great. So the thing is I still struggle with understanding CSS pseudo-elements. I don't understand how they work and where and how we can use them. So I decided to learn them one by one and write about my learnings. In this series of articles, I will be building simple things with CSS pseudo-elements to understand them better. This is part 1 of this series and in this article we will be building button and link hover effects using ::before
and ::after
pseudo-elements.
1. Button hover effect.
Lets start with the HTML.
<button class="cta-1">
<span>Button Hover</span>
</button>
Here we have a button
with the class of cta-1
. Inside the button we have a span
with the button text.
Now let's add the CSS reset.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size: 62.5%;
font-family: 'Roboto', sans-serif;
}
This is the basic CSS we will need to remove some of the default styles from the elements.
After this, let's add the basic styles for our button.
.cta-1 {
position: relative;
padding: 12px 24px;
border: none;
font-size: 1.6rem;
background-color: #E0E7FF;
border-radius: 8px;
overflow: hidden;
cursor: pointer;
}
.cta-1:active, .cta-1:focus{
outline: none;
}
.cta-1 span{
position: relative;
color: #4F46E5;
transition: all 0.6s ease;
}
Here we are setting the position: relative
on both the button and the span so that later, we can set position: absolute
on the ::before
pseudo-element. And the transition
is for the hover effect. All other styles are for basic styling.
After these styles, our button will look like this
The pseudo-element.
- For the hover effect we will basically add the
::before
pseudo-element for ourbutton
- Then we will add
height
,width
andposition: absolute
top: 0
left: 0
to the pseudo-element so it sits in between thespan
and thebutton
. - And after this we will add
transform: scaleX(0)
transform-origin: 100%
(More on this in next step)
So, let's add this CSS
.cta-1::before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
background: #4F46E5;
transform: scaleX(0);
transform-origin: 100%;
transition: transform 0.6s ease;
}
The Hover effect
For the hover effect to happen, we are just going to scale our ::before
pseudo-element on hover effect and change the color
of our span
(which is our button text).
.cta-1:hover::before {
transform-origin: 0;
transform: scaleX(1);
}
.cta-1:hover span{
color: #E0E7FF;
}
Final result:
Tip!: You can play with the
transform-origin
property to try and get different hover effects.
2. Link hover effect.
For the link, it's pretty much the same. Let's start with the basic HTML and CSS.
<a href="#" class="link-1">Link Hover</a>
.link-1 {
position: relative;
color: #475569;
font-size: 1.8rem;
text-decoration: none;
transition: all 0.3s ease;
}
- Now we will add the
::after
pseudo-element for the link and position it below ourlink
by settingposition: absolute
,bottom: 0
,left:0
- Then we will add
height
andbackground-color
to our::after
pseudo-element so that we can see it. - And finally, we will add
transform: scaleX(0)
andtransform-origin: bottom left
on it so it stays hidden by default.
.link-1::after {
content: '';
width: 100%;
position: absolute;
height: 3px;
bottom: 0;
left: 0;
background-color: #4F46E5;
transform: scaleX(0);
transform-origin: bottom left;
transition: all 0.3s ease;
}
Now we will just scale the speudo element and change the color of our link on hover to see our hover effect.
.link-1:hover{
color: #4F46E5;
}
.link-1:hover::after {
transform: scaleX(1);
}
Tip!: You can play with the
transform-origin
property to try and get different hover effects.
Final result:
That was it for this little article. I got to learn so much from this. And I hope you also find this useful. Thank u so much! 😀
Top comments (11)
hey there i just read it full and you did it great
Not only you but i also understood something from it🤓
By the way I had a question❓since long time that do we always need to position the pseudo elements, that is the ::after and ::before pseudo-elements ?🤔(not only in your case I am asking in general)
No we don't have to position them always. I did it because in button example i wanted to put it between the button and the span(button text) so it works like background to that button text.
And in link example i wanted to put the pseudo element below the link (like an underline). That's why i used the position options.
Thank you so much for quick response 🙏
Umm one more
The ::before pseudo element is behind the actual element and ::after pseudo element is in front of the actual element.
Is it true or false
Even in case of a paragraph styling and in case we are designing something as you did..( I hope you understood the question 😅😅)
Yes u r right. Lets say u have a h1 says 'hello world' and u put before and after pseudo elements to it then it will appear like this
before Hello world after.
This is a stupid example but hope u get my point😅
Ya sure i got you gaurav
Awesome!
Thank u!
I will need to add this to my portfolio
Great job
Thank u!
Wow that's really great and helpful, i wish u could do some stuff on animation. Thank you!