如何调整样式让SVG文本下划线正确显示在两行文本之间？

问题原因 #

你当前的样式有两处核心问题导致下划线无法正常显示：

1. 给目标span设置了display: inline-block属性，行内块元素如果内容跨多行，背景图只会渲染在整个块的底部，不会跟随每一行文本显示
2. 没有预留足够的底部空间，背景图的位置超出了行盒的可视区域，被自动裁切了

调整方案 #

按如下修改CSS即可实现多行文本都显示自定义下划线，且位置可控：

p {
  font-size: 1.6rem;
  line-height: 1.8; /* 可根据需要调整，值越小下划线越贴近下一行文本 */
}
.n-underline-bacon {
  /* 移除display: inline-block，恢复默认行内元素特性 */
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
  background-repeat: repeat-x;
  background-position: 0 1.2em; /* 微调垂直位置，对齐文本底部 */
  background-size: 1rem 1rem;
  color: #9e4446;
  padding-bottom: 0.4em; /* 给下划线预留显示空间，避免被裁切 */
}

如果需要下划线更靠近下一行文本，直接减小p标签的line-height值即可，最低可调整到1.4，不会出现文字重叠问题。

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