带文字内容的分隔线

<hr class="hr-solid-content" data-content="分隔线">
<hr class="hr-solid-content" data-content="文字自适应，背景透明">
.hr-solid-content {
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
}
.hr-solid-content::before {
    content: attr(data-content);
    position: absolute;
    padding: 0 1ch;
    line-height: 1px;
    border: solid #d0d0d5;
    border-width: 0 99vw;
    width: fit-content;
    /* for 不支持fit-content浏览器 */
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}

两端虚线

使用的border-image配合重复线性渐变模拟的虚线边框效果，HTML代码为

<hr class="hr-dashed-content" data-content="分隔线">

CSS代码，.hr-dashed-content需要的CSS代码和上面.hr-solid-content一模一样，然后，额外增加下面这行CSS：

.hr-dashed-content::before {
    border-image: repeating-linear-gradient(90deg, #d0d0d5, #d0d0d5 1px, transparent 1px, transparent 2px) 0 85% / / 0 repeat;
}

两端淡出

在原来实线效果基础上使用渐变作为遮罩就可以实现这样的效果了：

<hr class="hr-fade-content" data-content="分隔线">
// ... 一致代码略
.hr-fade-content {
    -webkit-mask-image: linear-gradient(to right, transparent, black, transparent);
    mask-image: linear-gradient(to right, transparent, black, transparent);
}

内容装饰

如果希望内容用框框起来，加个背景什么的，则需要借助另外一个伪元素，因为::before的尺寸高度被限制在了1px, 此时只能::after伪元素出马，同样不展示一致的CSS代码。

<hr class="hr-mid-border-content" data-content="分隔线">
.hr-mid-border-content::after{
    content: attr(data-content);
    position: absolute;
    padding: 4px 1ch;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: transparent;
    border: 1px solid #d0d0d5;
}

参考