如何用纯CSS+HTML实现带圆点的标题分隔线（无需表格）

问题描述 #

我喜欢某网站的一种CSS标题样式，原本它是通过CSS表格+SVG圆点实现的。我希望不使用表格，仅用纯CSS和HTML复刻相同效果，但当前编写的代码中右侧分隔线无法占满宽度，inline-block属性也未生效，寻求最优最简的实现方案。

最优实现方案 #

使用Flex布局就能完美解决问题，代码简洁无冗余，无需表格和SVG：

HTML结构 #

<h2 class="dot-title"><span>自定义标题</span></h2>

CSS代码 #

.dot-title {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 1.5em 0;
}

/* 左右分隔线：自动填充剩余宽度 */
.dot-title::before,
.dot-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #e0e0e0; /* 可按需修改分隔线颜色 */
}

/* 标题容器：控制间距 */
.dot-title span {
  padding: 0 15px;
  position: relative;
  font-size: 1.2em;
}

/* 左侧圆点：通过绝对定位对齐 */
.dot-title span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #f44336; /* 可按需修改圆点颜色 */
}

方案优势与问题解决说明 #

1. 解决分隔线宽度问题：Flex布局的flex: 1属性让左右分隔线自动填充容器剩余宽度，彻底解决之前inline-block无法占满的缺陷
2. 无冗余元素：仅用一个<span>包裹标题，配合伪元素实现分隔线和圆点，HTML结构极简
3. 易维护调整：所有样式参数（颜色、尺寸、间距）都可直接修改数值，适配不同设计需求
4. 兼容性好：Flex布局支持所有现代浏览器，无需担心兼容性问题

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