如何仅修改.underline类实现单行/多行文本通用hover下划线效果？

只需修改.underline类的CSS属性，就能让多行文本也正常显示hover下划线效果，具体代码调整如下：

.underline {
  cursor: pointer;
  position: relative;
  text-decoration: none;
  /* 添加这两行，让装饰效果在每行文本上独立渲染 */
  display: inline-block;
  box-decoration-break: clone;
  background: linear-gradient(
                  to right,
                  green 0%, /* Green */
                  green 75%, /* Green */
                  red 75%, /* Red */
                  red /* Red */
  ) no-repeat 0 100%;
  background-size: 0 2px;
  transition: background-size 400ms;
}

.underline:hover {
    background-size: 100% 2px;
}

关键修改说明： #

• display: inline-block：把原本块级的p元素转为行内块元素，既保留包裹文本的特性，又能让box-decoration-break属性生效。
• box-decoration-break: clone：强制元素的背景、边框等装饰效果在每行文本上单独渲染，而非基于整个元素的容器盒子。这样多行文本的每一行底部都会生成对应下划线，hover时每行的下划线会同步展开。

该修改完全满足你的需求：无需调整HTML结构，.underline类仍可独立用于任意元素，且不管文本是单行还是随屏幕尺寸变化转为多行，下划线效果都能正常工作。

内容的提问来源于stack exchange，提问作者Malvinka