[分享]css中悬浮于文字下方

在CSS中，我们可以使用以下代码来使鼠标悬浮在文字下方时出现下划线：

css
p:hover {
  text-decoration: underline;
} 

以上代码将会在段落标签p中添加一个:hover伪类，当鼠标悬浮在这个元素上时，CSS会将该元素的文本底部添加一个下划线。
此外，我们也可以使用伪元素来创建悬浮效果，如下所示：

css
p {
  position: relative;
}

p::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: black;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

p:hover::after {
  transform: scaleX(1);
} 

以上代码会在段落标签p中添加一个伪元素::after，在这个元素上设置一个黑色的宽度为100%高度为1px的矩形框，并使其与p元素底部对齐。在鼠标悬浮时，通过transition属性，将该元素的scaleX属性从0过渡到1，从而实现悬浮效果。
无论是使用伪类还是伪元素，都可以在CSS中轻松地实现悬浮于文字下方的效果，使我们的网页看起来更加美观和易读。