CSS 小技巧：Flexbox 中的文本分隔符
<div>在本教程中，我们将借助 Flexbox 和伪元素创建一个带有单个元素的流式文本分隔符。
预览
HTML
结构非常简单：一个<div>包含分隔符标签的元素。
<div class="text-divider">Text divider</div>
CSS
我们可以使用 `::before` 和 `::after` 伪元素在标签两侧创建两条线。由于我们将 `.text-divider` 的 `display` 属性设置为 `flex`，因此可以应用flex-grow: 1该属性使伪元素占据所有可用空间。
.text-divider {
display: flex;
align-items: center; // align text and lines vertically
}
.text-divider::before,
.text-divider::after {
content: '';
height: 1px;
background-color: silver;
flex-grow: 1; // both lines will expand to occupy the available space
}
最后一步是使用 CSS 自定义属性来设置标签和线条之间的间距：
.text-divider {
display: flex;
align-items: center;
--text-divider-gap: 1rem; // set a customizable gap between label and lines
}
.text-divider::before,
.text-divider::after {
content: '';
height: 1px;
background-color: silver;
flex-grow: 1;
}
.text-divider::before {
margin-right: var(--text-divider-gap);
}
.text-divider::after {
margin-left: var(--text-divider-gap);
}