悬停时如何让文本每行都出现下划线

在网页设计和前端开发中，实现悬停时让文本每行都出现下划线的效果可以提升用户体验，使页面元素更加醒目和具有交互性。下面将介绍几种常见的方法来实现这一效果。

CSS伪元素与属性选择器结合法

使用CSS的伪元素::after结合属性选择器可以实现较为精准的控制。给需要添加下划线效果的文本设置一个特定的类名，比如.underline-on-hover。然后通过CSS代码进行样式设置：

.underline-on-hover {
  position: relative;
  display: inline-block;
}

.underline-on-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.underline-on-hover:hover::after {
  transform: scaleX(1);
}

在上述代码中，通过::after伪元素创建了一个下划线元素，初始时它的宽度为0，当鼠标悬停时，通过过渡效果使其宽度变为100%，从而实现下划线的显示效果。

使用JavaScript动态添加类

如果需要更复杂的交互逻辑，可以结合JavaScript来实现。例如，当鼠标悬停在某个元素上时，通过JavaScript为文本的每一行添加一个带有下划线样式的类。

首先在HTML中给需要添加效果的文本容器添加一个id，比如id="text-container"。然后编写JavaScript代码：

const textContainer = document.getElementById('text-container');
textContainer.addEventListener('mouseover', function() {
  const lines = textContainer.querySelectorAll('p');
  lines.forEach(line => {
    line.classList.add('underline');
  });
});

textContainer.addEventListener('mouseout', function() {
  const lines = textContainer.querySelectorAll('p');
  lines.forEach(line => {
    line.classList.remove('underline');
  });
});

再在CSS中定义.underline类的样式：

.underline {
  text-decoration: underline;
}

通过以上方法，就可以在悬停时让文本每行都出现下划线，开发者可以根据具体项目需求选择合适的实现方式。