如何修改CSS代码实现多行文本的下划线效果？

原来的伪元素方案只能给整个标题添加一个单一的背景块，自然无法适配多行换行的场景。要实现每行文本下方都有自定义样式的下划线，可以用线性渐变背景+背景重复的方式替代伪元素方案，具体修改如下：

修改后的CSS代码 #

#full-service-creative-studio {
  position: relative;
  /* 控制文本行高，要大于下划线高度，留出间距 */
  line-height: 1.8;
  /* 设置线性渐变作为背景，对应原来的下划线颜色 */
  background-image: linear-gradient(transparent 0%, transparent 70%, #46989C 70%, #46989C 100%);
  /* 让背景在水平方向重复，垂直方向不重复 */
  background-repeat: repeat-x;
  /* 背景大小：宽度100%，高度对应下划线的高度 */
  background-size: 100% 28px;
  /* 调整背景位置，让下划线和文本的间距匹配原来的效果 */
  background-position: 20px 10px;
  /* 给底部加内边距，避免下划线被容器裁剪 */
  padding-bottom: 10px;
}

对应的HTML代码（无需修改） #

<h1 id="full-service-creative-studio">Full Service Design Studio</h1>

原理说明 #

• 用linear-gradient创建一个包含透明区域和下划线颜色的渐变背景，通过调整渐变百分比控制下划线的垂直位置和高度
• background-repeat: repeat-x让这个渐变背景在每行文本下方重复显示
• background-size定义每行背景的高度（对应下划线高度），background-position控制整体偏移量，和原来的left、bottom参数对应
• 调整line-height确保每行背景不重叠，同时让文本和下划线保持合适间距

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