时间戳

首页 > 解决方案 > 下划线悬停效果占用整个空间，但它应该只占用文本空间

html - 下划线悬停效果占用整个空间，但它应该只占用文本空间

问题描述

我实际上是在尝试在悬停时在文本上添加下划线效果

但是当我将鼠标悬停在 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>

标签： htmlcss

解决方案

您需要添加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>

推荐阅读