html - 双下划线效果 CSS

Question

我有来自 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;
        }

它的作用是为鼠标悬停时从左侧出现的按钮添加按钮边框。

但是我想要的效果是这样的，而且是多次的。所以这应该被多次添加，每次延迟 0.1 秒，以及另一种颜色。我该怎么做？我尝试使用 ::before(n) 但它没有用。

Answer 1

可以使用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>

****请小心，一旦您为内部容器提供 z-index 并以 100% 的高度和宽度将其置于最前面，主容器内的任何元素都可能无法点击。