如何使用CSS实现标题下方延伸至页面左边缘的拖尾下划线？

问题核心 #

线条无法延伸到页面左边缘的根本原因是标题外层的.page__item--left容器设置了左侧内边距，常规流里的子元素宽度默认被限制在父容器的内容区域内，无法突破内边距边界延伸到页面边缘。

现有代码与效果参考 #

当前使用的HTML结构：

<div class="page__item page__item--left">
  <h2 class="page__header__title page__header__title--ltr">
      EXPERIENCE
  </h2>
  <div class="page__header__line"></div>
</div>

效果对比：

• 设计稿预期效果：
  
• 当前实现存在的问题：
  

可直接复用的实现代码 #

不需要调整现有HTML结构，添加以下CSS即可实现效果：

1. 先给外层容器添加基础配置，允许子元素超出边界渲染：

.page__item--left {
  position: relative;
  overflow: visible;
}

2. 配置线条样式，用定位偏移把线条拉到页面最左侧：

.page__header__line {
  position: absolute;
  left: 0;
  /* 根据标题实际行高、字号调整top值，让线条落在标题下方对应位置 */
  top: 2.5rem;
  width: 100%;
  /* 用calc计算偏移量，比直接写100vw兼容性更好，不会因为滚动条出现横向滚动 */
  transform: translateX(calc(-50vw + 50%));
  height: 1px;
  background: #1a1a1a; /* 按设计稿调整线条颜色 */
}

3. 标题.page__header__title保持原有样式即可，不需要额外调整边距，自然会和下方内容起始位置对齐。

更简洁的无冗余DOM方案 #

如果不想保留单独的.page__header__line空div，可以直接用标题的伪元素实现，不需要额外手动适配不同字号下的线条位置，适配性更强：

.page__header__title--ltr {
  position: relative;
  padding-bottom: 0.8rem; /* 控制标题和下方线条的间距 */
}
.page__header__title--ltr::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: translateX(calc(-50vw + 50%));
  height: 1px;
  background: #1a1a1a;
}

添加上述样式后，直接把原来的.page__header__line空div删掉即可，效果完全一致。

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