CSS如何用短横线填充段落每行换行后的空白区域？

方法一：Flex布局+伪元素 #

适合单行文本场景，每个文本行作为独立容器，通过伪元素生成短横线填充剩余空间。

HTML结构 #

<div class="line-item">第一行文本内容</div>
<div class="line-item">第二行较长的文本内容，测试短横线填充效果</div>
<div class="line-item">第三行</div>

CSS样式 #

.line-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.line-item::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, #000, #000 4px, transparent 4px, transparent 8px);
  margin-left: 8px;
}

方法二：背景渐变+文本背景覆盖 #

针对自动换行的多行文本，用背景渐变实现横线，再给文本添加同页面背景色覆盖文本区域的横线。

HTML结构 #

<p class="fill-lines">这是第一行较长的文本，会自动换行，每行的空白区域都需要填充短横线。这是第二部分内容，继续测试换行后的横线填充效果。</p>

CSS样式 #

.fill-lines {
  line-height: 1.6;
  background: repeating-linear-gradient(90deg, #000, #000 4px, transparent 4px, transparent 8px);
  background-size: 100% 1px;
  background-position: left bottom;
  background-repeat: repeat-x;
  padding-bottom: 1px;
  /* 用页面背景色覆盖文本区域的横线 */
  background-color: #fff;
  background-clip: content-box;
}

注意：方法二需要确保文本背景色与页面背景一致，避免出现异常遮挡；若需更精准控制，建议将每行文本拆分为独立元素使用方法一。

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