DEV Community

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

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

devggaurav profile image Gaurav ・3 min read

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.

Alt Text

Lets start with the HTML.

<button class="cta-1">
   <span>Button Hover</span>
</button>

Enter fullscreen mode Exit fullscreen mode

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;
}

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Final result:

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
.link-1 {
    position: relative;
    color: #475569;
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
  }
Enter fullscreen mode Exit fullscreen mode

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);
  }
Enter fullscreen mode Exit fullscreen mode

Tip!: You can play with the transform-origin property to try and get different hover effects.

Final result:

Alt Text

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! 😀

Discussion (11)

pic
Editor guide
Collapse
bmeet profile image
B-Meet • Edited

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)

Collapse
devggaurav profile image
Gaurav Author

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.

Collapse
bmeet profile image
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 😅😅)

Thread Thread
devggaurav profile image
Gaurav Author

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😅

Thread Thread
bmeet profile image
B-Meet

Ya sure i got you gaurav

Collapse
hemazyn profile image
Hemazyn

I will need to add this to my portfolio

Collapse
arvindsridharan profile image
Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
hemazyn profile image
Hemazyn

Great job

Collapse
devggaurav profile image
Gaurav Author

Thank u!

Collapse
akinchineye profile image
Akinchineye

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