下划线悬停效应占用整个空间，但应该只占用文本空间。
下划线悬停效应占用整个空间，但应该只占用文本空间。
提问于 2018-05-16 14:51:00
我实际上是想在文本上加上下划线效果
但是当我悬停在p元素上时，下划线实际上占据了整个空间，我想要的是下划线应该只显示在文本中，而不是文本占用的完整空间内。
为了做到这一点，我实际上添加了一个span元素，并给了span的悬停效果，但是它仍然是一样工作的，
请检查我在下面添加的代码的效果，请帮助，谢谢:)
.underline-effect span:after{
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 2px solid;
margin-top: 10px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.underline-effect span:hover:after{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}<p class="underline-effect">
<span>Home</span>
</p>
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-05-16 15:01:12
您需要将position: relative添加到span元素中。
.underline-effect span{
position: relative;
}
.underline-effect span:after{
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 100%;
border-bottom: 2px solid;
margin-top: 10px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.underline-effect span:hover:after{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}<p class="underline-effect">
<span>Home</span>
</p>
Stack Overflow用户
发布于 2018-05-16 15:02:20
您的span需要有一个span的伪元素可以关联的position: relative;：
.underline-effect span {
position: relative;
}
.underline-effect span:after {
content: '';
position: absolute;
top: 20px;
left: 0;
width: 100%;
border-bottom: 2px solid;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
}
.underline-effect span:hover:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}<p class="underline-effect">
<span>Home</span>
</p>
Stack Overflow用户
发布于 2018-05-16 15:06:14
代码是按照你说的做的。将父元素的宽度设置为100%，这就是动画悬停影响占100%的原因。
.underline-effect span:after{
content: '';
position: absolute;
left: 0;
display: inline-block;
height: 1em;
width: 60px;/*changed from 100%*/
border-bottom: 2px solid;
margin-top: 10px;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(0,1);
transform: scale(0,1);
}
.underline-effect span:hover:after{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}参见此小提琴
编辑:这是可行的，但上面的答案是，将position:relative放在span上是一个更好的解决方案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50374045
复制相关文章
相似问题
腾讯云开发者
