Learning about CSS pseudo-elements by building simple things - Part 1: Button and link hover effects.
Tags: css, tutorial, webdev, beginners
Published: 2021-03-16 07:44:15

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skowl03u1rbjmobln7bg.gif)

### Lets start with the HTML.

``` 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.

``` CSS
*{
    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.

``` CSS

.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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnrqai4em1ky24bta3z7.png)

### 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

``` 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).


``` CSS
.cta-1:hover::before  {
    transform-origin: 0;
    transform: scaleX(1);
}

.cta-1:hover span{
    color: #E0E7FF;
}
```

Final result: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skowl03u1rbjmobln7bg.gif)

> 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.

``` HTML
<a href="#" class="link-1">Link Hover</a>
```

``` CSS
.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.

``` CSS
  .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.

``` CSS
  .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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcwm2wrmeke8m90t9qqf.gif)

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