Html 双下划线效果

我的代码来自：

它的作用是在悬停时从左侧显示的按钮上添加一个按钮边框

但我想要的效果是这个，但要多次。因此，应该添加多次，每次延迟0.1s，以及其他颜色。我该怎么做？

---

我尝试使用

：：before（n）

，但没有效果。

您可以使用after伪类来获得双下划线效果

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

//除了转换延迟和底部位置之外，与课前相同，您可以根据需要进行调整
.hvr左下划线：：后{
内容：“；
位置：绝对位置；
z指数：-1；
左：0；
右：100%；
底部：10px；
背景：#0F9E5E；
高度：0.3em；
-webkit转换属性：右；
过渡财产：权利；
-webkit转换持续时间：0.1s；
过渡时间：0.1s；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
//课后和课前的悬停效果相同。
.hvr下划线（从左开始）：悬停：：之后，
.hvr下划线（从左开始）：焦点：：之后，
.hvr下划线（从左开始）：活动：：之后{
右：0；
}
//补充
.hvr下划线从左。hvr下划线从左{
位置：绝对位置；
身高：100%；
宽度：100%；
背景：透明；
排名：0；
左：0；
z指数：1000；
}
.hvr下划线自左。hvr下划线自左：后{
底部：20px；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
}
.hvr下划线从左开始。hvr下划线从左开始：之前{
底部：30px；
-webkit转换持续时间：0.3s；
过渡时间：0.3s；
}
//div标签是这样的

---

****请小心，一旦你给了内部容器的z-指数，并把它带到前面的100%高度和宽度的任何元素在主容器内可能无法点击

或者，您可以使用css动画关键字来获得不同颜色的多次下划线效果，并根据需要调整时间。乙二醇

.hvr左起下划线{
显示：内联块；
垂直对齐：中间对齐；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
长方体阴影：0 1px rgba（0,0,0,0）；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
溢出：隐藏；
}
.hvr左下划线：：前{
内容：“；
位置：绝对位置；
z指数：-1；
左：0；
右：100%；
底部：0；
高度：0.3em；
-webkit转换属性：右；
过渡财产：权利；
-webkit转换持续时间：0.2s；
过渡时间：0.2s；
-webkit过渡计时功能：缓解；
过渡定时功能：缓解；
}
.hvr下划线（从左开始）：悬停：：之前{
动画：彩色；
动画填充模式：正向；
}
@关键帧颜色下划线{
0%{
右：100%；
背景：#0F9E5E；
}
25%{
背景：#0F9E5E；
右：0；
}
26%{
背景：#8e44ad；
右：100%；
}
50%{
背景：#8e44ad；
右：0；
}
51%{
背景：#e74c3c；
右：100%；
}
75%{
背景：#e74c3c；
右：0；
}
76%{
背景：#f1c40f；
右：100%；
}
100%{
右：0；
背景：#f1c40f；
}
}

试验

这很好用，汉克斯！你能把它们的倍数加起来吗？如果是的话，怎么办。。可以，在这个场景中只能使用两个伪元素。您可以在容器中添加另一个来自left类的hvr underline，使其处于绝对位置，并为其提供透明背景的z索引。这可能会使事情变得更复杂一些，只要确保应用此选项后所有功能都完好无损即可。因此，无法使用诸如：：after（n）之类的内容？不幸的是，据我所知，一个DOM元素只能有一个前后元素。您可以在此处获得更多信息>

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