Doubble强调效果CSS(Double underline effect CSS)

 我有来自Hover.css包的代码： 
 
.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)但它没有用。 

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. 

原文：https://stackoverflow.com/questions/40387296