我有来自 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)
但它不起作用。
最佳答案
可以在伪类之后使用来获得双下划线效果。
//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% 高度和宽度放在前面,主容器内的任何元素可能都无法单击,请小心。
关于html - 双下划线效果CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40387296/