How to use hover effect with after and before?

How to work :hover effect with ::after and ::before?

Pseudo-classes are the following-  :link, :visited, :hover, :active, :checked, :disabled, :empty etc. and pseudo-element are the following- ::after, ::before, ::first-letter, ::first-line, ::selection.

Pseudo-class is the simple selector and pseudo-element is the hidden selector so it will come when page load so it will come after pseudo-class as given below syntax:

Syntax

      a:hover::after {

            /* Here will go your css property */

        }

        a:hover::before {

            /* Here will go your css property */

        }

Hover effect with before example:

<style>

        .arrow {

            position: relative;

            font-family: Arial, Helvetica, sans-serif;

            font-size: large;

            cursor: pointer;

        }

        .arrow::after {

            position: absolute;

            Border-top: 10px solid transparent;

            Border-right: 10px solid transparent;

            Border-bottom: 10px solid transparent;

            Border-left: 10px solid #0bf;

            content: '';

            margin-left: 10px;

        }

        .arrow:hover::after {

            Border-left: 10px solid #0b6;

        }

    </style>

<div class="arrow">My Arrow</div>

When we will hover on the arrow then we found the same result as given above code: