codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Animated CSS line on hover for hyperlinks

    11th November 2019

    CSS

    Css - Codehaven

    After producing a nice full screen menu in Elementor I decided to add a nice effect when hovering over the links.
    It produces a line going from right to left when hovering.
    Just cut and paste code and start from there…..

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
     
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#"></a></li>
      </ul>
     
     
    <style>
    html {
      background: black;
    }
    a {
      color: white;
      text-decoration: none;
      display: inline-block;
      position: relative;
    }
    a:hover:after {
      width:100%;
      right: 0;
    }
    a:after {
      background: none repeat scroll 0 0 transparent;
      bottom: 0;
      content: "";
      display: block;
      height: 2px;
      right: 0;
      position: absolute;
      background: #FFF;
      transition: width 1s ease 0s, right 0.5s ease 0s;
      width: 0;
    }
    </style>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN