Learning about CSS pseudo-elements by building simple things - Part 1: Button and link hover effects.

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 our button
• Then we will add height, width and position: absolute top: 0 left: 0 to the pseudo-element so it sits in between the span and the button .
• 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 our link by setting position: absolute,bottom: 0, left:0
• Then we will add height and background-color to our ::after pseudo-element so that we can see it.
• And finally, we will add transform: scaleX(0) and transform-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! 😀

Comments

[b-meet]

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)

[Gaurav]

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.

[b-meet]

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 😅😅)

[Gaurav]

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😅

[b-meet]

Ya sure i got you gaurav

[arvindsridharan]

Awesome!

[Gaurav]

Thank u!

[Hemazyn]

Great job

[Gaurav]

Thank u!

[Hemazyn]

I will need to add this to my portfolio

[Akinchineye]

Wow that's really great and helpful, i wish u could do some stuff on animation. Thank you!