作者:漫猪傻滑_679 | 来源:互联网 | 2023-01-31 16:59
如何使用border-bottom为链接加下划线设置动画,以便文本和下划线之间有空格?
我知道如何以下面的方式执行它,以便默认的text-decoration元素是动画的.但是我希望链接和下划线之间有空格,这就是为什么我认为我需要使用border-bottom.但我无法通过过渡动画获得边框底部的工作.我怎么能这样做?我试着寻找其他解决方案,但找不到任何解决方案.谢谢!
h2 > a {
position: relative;
color: #000;
text-decoration: none;
}
h2 > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
h2 > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
G-Cyr..
11
你可以通过背景和背景大小伪造一个动画边框:
a {
padding-bottom: 5px;
/* set here size + gap size from text */
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat;
background-size: 0px 3px;
transition: 0.5s;
text-decoration: none;
}
a:hover {
background-size: 100% 3px;
}
a[class] {
color: gray;
}
a.tst {
color: purple;
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat;
background-size: 0px 2px;
}
a.tst:hover {
background-size: 100% 2px;
}
kake animated border
why currentcolor ?
mix of colors ?
1> G-Cyr..:
你可以通过背景和背景大小伪造一个动画边框:
a {
padding-bottom: 5px;
/* set here size + gap size from text */
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat;
background-size: 0px 3px;
transition: 0.5s;
text-decoration: none;
}
a:hover {
background-size: 100% 3px;
}
a[class] {
color: gray;
}
a.tst {
color: purple;
background: linear-gradient(0deg, currentcolor, currentcolor) bottom center no-repeat, linear-gradient(0deg, turquoise, turquoise) center calc(100% - 2px) no-repeat;
background-size: 0px 2px;
}
a.tst:hover {
background-size: 100% 2px;
}
kake animated border
why currentcolor ?
mix of colors ?
2> Ori Drori..:
您提供的代码使用伪元素而不是默认的文本修饰.由于伪元素绝对定位,您可以轻松更改距离.将a:before
底部更改为-5px
或任何负值适合您想要的距离:
a {
position: relative;
color: #000;
text-decoration: none;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -5px;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
Long long text