Ads Top

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 {
            positionrelative;
            font-familyArialHelveticasans-serif;
            font-sizelarge;
            cursorpointer;
        }
        .arrow::after {
            positionabsolute;
            Border-top10px solid transparent;
            Border-right10px solid transparent;
            Border-bottom10px solid transparent;
            Border-left10px solid #0bf;
            content'';
            margin-left10px;
        }
        .arrow:hover::after {
            Border-left10px 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:

No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.