Double underline effect CSS

Question

I have this code from the Hover.css pack:

.hvr-underline-from-left{
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            overflow: hidden;
        }
        .hvr-underline-from-left::before {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 100%;
            bottom: 0;
            background: #0F9E5E;
            height: 0.3em;
            -webkit-transition-property: right;
            transition-property: right;
            -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
        .hvr-underline-from-left:hover::before, .hvr-underline-from-left:focus::before, .hvr-underline-from-left:active::before {
            right: 0;
        }

What this does is that it adds a buttom border to a button that appeares from the left on hover.

But the effect i want is this, but multible times. So this should be added multible times with 0.1s delay every time, and an other color. How would i do this? I tried using ::before(n) but it didn't work.

Saa_keetin · Accepted Answer · 2016-11-02T19:25:19.910

You can use after pseudo class to get the double underline effect.

//same as before class except for transition delay and bottom position you can adjust that as needed

        .hvr-underline-from-left::after {
        content: "";
        position: absolute;
        z-index: -1;
        left: 0;
        right: 100%;
        bottom: 10px;
        background: #0F9E5E;
        height: 0.3em;
        -webkit-transition-property: right;
        transition-property: right;
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        -webkit-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
    }

  // on hover effect for after same as before class. 
    .hvr-underline-from-left:hover::after, 
    .hvr-underline-from-left:focus::after, 
    .hvr-underline-from-left:active::after {
        right: 0;
    }



     //to add more

    .hvr-underline-from-left .hvr-underline-from-left{
    position:absolute;
    height:100%;
    width:100%;
    background:transparent;
    top:0;
    left:0;
    z-index:1000;
    }
    .hvr-underline-from-left .hvr-underline-from-left:after{
    bottom:20px;
     -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }
    .hvr-underline-from-left .hvr-underline-from-left:before{
    bottom:30px;
     -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    }

// and div tags look like this 
<div class="hvr-underline-from-left">
   <div class="hvr-underline-from-left">
    </div>
</div>

****Please be careful once you give the inner container z-index and bring it to the front with 100% height and width any elements inside the main container might not be clickable.

This works perfectly, hanks! Would you be able to add multible of these? If so, how?? — Oliver Brodersen, Nov 02 '16 at 19:09
Umm.. you can , there are only two pseudo elements that can be used in this scenario. you can add another hvr-underline-from-left class inside the container ,make it absolute position give it z-index with transparent background. — Saa_keetin, Nov 02 '16 at 19:22
It might make things little more complicated, just make sure all the functionality is intact once you apply this. — Saa_keetin, Nov 02 '16 at 19:28
Unfortuantely to the best of my knowlegde no, there can be only one before and after elements to one DOM element. you can get more info on this here > http://stackoverflow.com/questions/10855890/two-after-pseudo-elements — Saa_keetin, Nov 02 '16 at 21:21

GIRISH kuniyal · Answer 2 · 2016-12-06T19:23:14.263

Alternatively You can use css animation keyword for getting this multiple times underline effect with different color.and Adjust time according to your need. eg

.hvr-underline-from-left{
            display: inline-block;
            vertical-align: middle;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -moz-osx-font-smoothing: grayscale;
            position: relative;
            overflow: hidden;
        }
.hvr-underline-from-left::before {
            content: "";
            position: absolute;
            z-index: -1;
            left: 0;
            right: 100%;
            bottom: 0;
            height: 0.3em;
            -webkit-transition-property: right;
            transition-property: right;
            -webkit-transition-duration: 0.2s;
            transition-duration: 0.2s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
.hvr-underline-from-left:hover::before {
            animation:colorUnderline 2s;
            animation-fill-mode: forwards;
        }
        
@keyframes colorUnderline{
          0%{
            right:100%;
            background: #0F9E5E;
          }
          25%{
            background: #0F9E5E;
            right:0;
          }
          26%{
            background: #8e44ad ;
            right:100%;
          }
          50%{
            background: #8e44ad ;
            right:0;
          }
          51%{
            background: #e74c3c ;
            right:100%;
          }
          75%{
            background: #e74c3c ;
            right:0;
          }
          76%{
            background: #f1c40f ;
            right:100%;
            }
          100%{
            right:0;
            background: #f1c40f ;
          }
        }

<body>
<div class="hvr-underline-from-left">Test</div>
</body>

Double underline effect CSS

2 Answers2