Question

我真的试图在文字悬停时为文字添加下划线效果

但是当我将鼠标悬停在p元素上时，下划线实际上占据了整个空间，我想要的是下划线只应显示在文本中而不是文本占用的完整空间

要做到这一点，我实际上添加了一个span元素并将悬停效果赋予了跨度，但它的工作方式仍然相同，

请检查我添加下面代码的效果，请帮助，提前致谢：）

＆＃13;

.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);
}

＆＃13;

<p class="underline-effect">
  <span>Home</span>
</p>

＆＃13;

Answer 1

您需要将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>

Answer 2

您的span需要{span}的伪元素可以与相关联的position: relative;：

＆＃13;

.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);
}

＆＃13;

<p class="underline-effect">
  <span>Home</span>
</p>

＆＃13;

Answer 3

代码正在做你告诉它要做的事情。您将父元素的宽度设置为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);
}

请参阅此fiddle

编辑：这会有效，但上面的回答是position:relative放在你的span上是一个更好的解决方案imho

Answer 4

跨度需要一个相对位置，但另一种方法是，你可以给出span-bottom到span，padding或line-height，当你悬停span时，会显示border-bottom。我认为这种方式更好。

下划线悬停效果占据了整个空间，但它只需要文本空间

4 个答案: