如何为文本/标题添加可自适应高度的垂直侧边线？

问题分析 #

你当前用d-flex align-items-center包裹侧边线和标题，导致侧边线无法自动拉伸匹配标题高度——因为align-items:center会让flex子元素在交叉轴居中，而非填充容器高度，所以侧边线高度只能由自身内容决定（空div自然撑不起高度）。

方案一：优化现有Flex结构 #

只需调整flex容器的对齐方式，并清理标题默认边距，就能让侧边线自动适配标题高度：

.post-title-container {
  display: flex;
  /* 移除align-items:center，默认align-items:stretch会让子元素拉伸填充容器高度 */
}

.post-title {
  font-weight: 700;
  margin: 0; /* 清除h1默认的上下边距，避免容器高度额外增加 */
}

.vertical-line {
  width: 10px;
  background-color: #007bff;
  margin-right: 1rem;
  /* 无需设置height，stretch会自动匹配标题高度 */
}

HTML结构保持不变即可。

方案二：使用伪元素（更优解，精简DOM） #

如果想简化结构，不需要额外的侧边线div，直接用标题的伪元素实现侧边线，自动适配高度：

.post-title {
  font-weight: 700;
  position: relative;
  padding-left: 1.5rem; /* 给侧边线预留空间 */
}

.post-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background-color: #007bff;
}

对应的HTML结构可以简化为：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="post-title-container">
  <h1 class="post-title">
    Lorem ipsum dolor sit amet consectetur adipisicing
  </h1>
</div>

这种方案减少了不必要的DOM元素，维护起来更方便，推荐使用。

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