寻求无需白色背景的文本跟随式线条与SVG视觉效果实现方案

修改后的代码实现 #

HTML

<h1 class="title">
  How can you ensure that the line follows the text in all circumstances?
  <span class="line-wrapper">
    <span class="line"></span>
    <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#e74c3c">
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
    </svg>
  </span>
</h1>

CSS

.title {
  font-weight: bold;
  line-height: 1.5; /* 可根据需求自定义行高 */
}

.line-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* 控制文本与线条的间距 */
  margin-left: 12px;
}

.line {
  flex-grow: 1;
  height: 3px;
  min-width: 20px; /* 确保文本占满一行时线条仍有最小显示宽度 */
  background-color: #f00;
}

.svg {
  width: 42px;
  height: 1lh;
  flex-shrink: 0; /* 防止SVG被压缩变形 */
}

方案原理与需求匹配 #

1. 线条始终跟随文本：line-wrapper 是内联弹性容器，完全融入文本流，和文本保持在同一行，文本换行时容器会自动跟随到下一行。
2. 线条与SVG绑定：两者被包裹在同一个line-wrapper容器内，通过flex布局固定关联，永远不会分离。
3. 适配文本换行场景：内联元素特性决定了容器会跟随文本的换行逻辑，无论文本分成多少行，线条和SVG都会附着在最后一个单词所在的行。
4. 移除白色背景：线条仅填充line-wrapper内文本到SVG之间的剩余空间，不会延伸到SVG下方，因此无需白色背景遮挡，完美适配多色背景场景。

可选优化 #

如果需要让线条和文本的垂直对齐更精准，可以调整line-wrapper的align-items属性（如设置为baseline），或者微调line的transform属性来校准位置。

内容的提问来源于stack exchange，提问作者Jimmy.D