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:

      a:hover::after {
            /* Here will go your css property */
        a:hover::before {
            /* Here will go your css property */

Hover effect with before example:
        .arrow {
        .arrow::after {
            Border-top10px solid transparent;
            Border-right10px solid transparent;
            Border-bottom10px solid transparent;
            Border-left10px solid #0bf;
        .arrow:hover::after {
            Border-left10px solid #0b6;
<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:

Note: Only a member of this blog may post a comment.

Copyright Reserved to Anything Learn. Powered by Blogger.