Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Underline hover effect using CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 752
    Comment on it

    Hi all,

    In this, I am showing a simple hover underline effect using pseudo elements and just set transition at .3 second make width 100% on element hover.

    See the below code with output -

    CSS:

    a, a:visited {
      text-decoration: none;
      position: relative;
      color: #333;
    }
    a:after, a:visited:after {
      content: '';
      height: 2px;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0%;
      background: #333;
      transition: 0.3s;
    }
    a:hover:after, a:visited:hover:after {
      width: 100%;
    }
    a.block, a:visited.block {
      display: block;
      padding: 10px;
    }
    a.block:hover, a:visited.block:hover {
      background: #ccc;
    }
    

    HTML :

    <p><a class="block" href="#">Awesome hover effect using css</a></p>
    <p><a href="#">Awesome</a> , <a href="#">Hover</a> , <a href="#">Effect</a></p>
    

    Output :

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: