如何实现从视口左侧起始到Bootstrap列内元素末端结束的横线

实现方案 #

你完全不需要修改现有外层HTML结构，仅需添加自定义CSS即可实现需求，核心是利用calc()动态计算偏移量让横线对齐视口左边缘，同时让横线长度和标题文本宽度保持一致：

自定义CSS代码 #

.title-with-line h2 {
  /* 让标题宽度和文本内容一致 */
  display: inline-block;
  position: relative;
  /* 调整数值控制标题和横线的间距 */
  padding-bottom: 8px;
}

.title-with-line h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  /* 核心：动态计算偏移，对齐视口左侧边缘 */
  left: calc(-50vw + 50%);
  /* 宽度和标题文本宽度一致 */
  width: 100%;
  height: 2px;
  /* 调整横线颜色 */
  background-color: #212529;
}

最终完整代码 #

你可以直接使用下面的完整代码测试效果，完全保留了你原本的HTML外层结构：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.title-with-line h2 {
  display: inline-block;
  position: relative;
  padding-bottom: 8px;
}

.title-with-line h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(-50vw + 50%);
  width: 100%;
  height: 2px;
  background-color: #212529;
}
/* 可选：避免出现横向滚动条 */
body {
  overflow-x: hidden;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="title-with-line">
                <h2>A great title</h2>
            </div>
        </div>
    </div>
</div>

方案说明 #

• 不需要新增任何HTML元素，也完全没有修改col-12外层的结构，符合你的要求
• 横线会自动从视口最左侧开始，到标题文本的末尾结束，不管标题文本长度怎么变都会自动适配
• 你可以根据需要调整CSS中的padding-bottom控制标题和横线的距离，修改height调整横线粗细，修改background-color调整横线颜色

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