Doubble unterstreichen Wirkung CSS

Question

Ich habe diesen Code aus dem 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; 
     } 

Was das bedeutet ist, dass es eine Buttom Grenze auf eine Schaltfläche fügt die von der linken auf schweben appeares.

Aber der Effekt, den ich will, ist dies, aber multiple Zeiten. Also sollte dies multiple Zeiten mit 0,1s Verzögerung jedes Mal hinzugefügt werden, und eine andere Farbe. Wie würde ich das tun? Ich versuchte mit ::before(n), aber es hat nicht funktioniert.

Answer 1

Sie können nach der Pseudoklasse den doppelten Unterstreichungseffekt verwenden.

//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> 

**** Bitte seien Sie vorsichtig, wenn Sie den inneren Behälter z-Index geben und nach vorne mit 100% Höhe bringen und alle Elemente innerhalb des Hauptbehälters Breite kann nicht angeklickt werden.

Answer 2

Alternativ können Sie css Animation Schlüsselwort für das Erhalten dieses mehrfache Unterstreichungseffektes mit unterschiedlichem color.and Justagezeit entsprechend Ihrem Bedarf.

zB

.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>