实现可填写文档布局：让文本下划线宽度匹配父div宽度

要实现纸质可填写文档的效果，让输入行的虚线下划线铺满整个容器宽度（而非仅跟随文字长度），可以放弃text-decoration方案，改用伪元素+绝对定位来实现，具体方案如下：

解决方案代码 #

CSS 样式 #

.fillable {
  position: relative; /* 为伪元素提供定位基准 */
  min-height: 3rem;
  width: 50%;
  margin-left: 0.25rem;
  display: flex;
  align-items: flex-end; /* 文字靠底部对齐 */
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -webkit-hyphenate-character: '-';
}

/* 用伪元素创建铺满宽度的虚线下划线 */
.fillable::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* 下划线高度 */
  border-bottom: 1px dotted #000; /* 虚线样式，可调整颜色和粗细 */
}

.fillable .content {
  font-size: 1.30rem;
  margin-bottom: 2px; /* 让文字和下划线保持合适间距 */
}

HTML 结构 #

<div style="font-family: times new roman, serif; max-width:250mm">
  <div style="border: 3px solid black;">
    <div style="margin:1px;">

      <div class="fillable">
        <div class="content">B_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_B</div>
      </div>

      <div style="width:50%; margin-left:0.25rem; font-size:0.8rem">
        (some text some text some text some text some text)
      </div>
      <div class="fillable" style="min-height:1.5rem; width:57%;">
        <div class="content">B_AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA_B</div>
      </div>
    </div>
    <div style="width:57%; margin-left:0.25rem; font-size:0.8rem">
      (some text some text)
    </div>
  </div>
</div>

方案说明 #

• 给.fillable设置position: relative，为伪元素提供定位基准
• 利用::after伪元素生成绝对定位的虚线边框，宽度设为100%，确保下划线铺满整个容器宽度
• 文字通过align-items: flex-end靠底部对齐，搭配margin-bottom调整与下划线的间距，贴合纸质文档的视觉排版

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