CSS实现左侧文本右侧贯穿水平居中分割线的布局问题求助

实现思路 #

使用Flex布局配合伪元素实现，无需多余DOM节点，兼容性好，适配各种容器宽度。

代码示例 #

HTML结构 #

<div class="title-wrapper">
  <span class="title-text">你的文本内容</span>
</div>

CSS样式 #

.title-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  /* 可根据需求调整容器的上下边距 */
  padding: 8px 0;
}

.title-text {
  /* 文本自定义样式 */
  font-size: 16px;
  color: #222;
  margin-right: 12px; /* 文本和分割线的间距，可自行调整 */
  white-space: nowrap;
}

/* 用伪元素实现分割线 */
.title-wrapper::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: #ccc; /* 分割线颜色，可修改 */
}

效果说明 #

• 文本和分割线默认垂直居中对齐，符合需求
• 分割线会自动占满容器剩余宽度，一直延伸到容器最右侧
• 文本如果是动态内容长度变化时，分割线会自动适配剩余宽度，无需额外调整

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