Pseudo before, after and hover in SCSS

The Client-side development is growing people migrated from server-side to client-side code. Now organizations are using React and Angular to develop solutions.  With these technologies, SCSS become popular because it provides cleaner nested syntax. In this article, we learn how to use pseudo-elements such as – before, after and hover in SCSS.

 

 

SCSS provides a cleaner and efficient way to add style to pseudo-element like – before, after, visited, hover, etc.

:: before in Scss

: before pseudo-class of any element in SCSS can be accessed using nested &:before. Below is the syntax and example –

Syntax –

#div{
 //styles
  &:before {
      //styles
  }
}

:: before in Scss example –

Suppose you have one div tag like below –

<div className={styles.container}>
</div>

Now use &:before applying the style to container div like below –

.container{
      min-width: 100%;
      height: 480px;
      &:before {
       display: table;
       box-sizing: border-box;
      }
}

So we are using nested & selector to access pseudo before in SCSS. The :after pseudo-class of an element is the same as :before pseudo just changes before from after.

 

 :: after in Scss

: after pseudo-class of any element in SCSS can be accessed using nested &:after. Below is the syntax and example –

Syntax –

#div{
 //styles
    &:after {
   //styles
  }
}

:: after in SCSS Example –

Suppose we have one div tag like below –

<div className={styles.container}>
</div>

Now use &: after to apply the style to container div like below –

.container{
      min-width: 100%;
      height: 480px;
      &:after {
       display: table;
       box-sizing: border-box;
      }
}

The other element like – hover, visited can be used in the same way see below examples –

 

:hover in Scss

Hover is a commonly used pseudo-element that can be applied to other elements. The :hover style can be applied in Scss like below –

Syntax –

a{
  //styles
  &:hover{
  //
 }
}

:hover in SCSS example

a{
  color: #fff;
  &:hover {
   color: #0000FF;
   text-decoration:underline;
  }
}

Like-wise you can access &: visited pseudo to access any element visited state and apply the style accordingly.

Conclusion

This is how you can access and apply style any pseudo-element such as – before, after, and hover in SCSS.