Css 文本后面有行的引导文本元素

我希望创建在文本后面有一行的文本标题，以填充容器的整个宽度，如以下示例所示：

例如：

实际文本本身周围会有一个白色框，用来阻挡行

.divider-text {
    height: 1px;
    width: 100%;
    display: inline;
    overflow: hidden;
    background-color: #e5e5e5;
}

---

这里的代码用

#e5

颜色填充整个文本容器。

您可以使用两个选项以简单的方式完成此操作

背景图像

第一个涉及背景图像：

h1{文本对齐：居中；背景颜色：#fff；背景：url（“http://i.imgur.com/Kkw7rPC.png?1）中心重复-x#fff；}
h1.文本{背景色：#fff；填充：10px；显示：内联块；}

---

Hello

考虑以下标记和CSS

。标题-1{
位置：相对位置；
文本对齐：居中
}
.标题-1：之前{
内容：“；
显示：块；
边框顶部：实心2px#bebe；
宽度：100%；
高度：2倍；
位置：绝对位置；
最高：50%；
z指数：0；
}
.标题-1{
背景：#fff；
填充：0 10px；
位置：相对位置；
z指数：1；
}

---

居中文本

一个简单的谷歌搜索“css文本，后面有一行”给出。试试这个极好的方法，如果文本在小屏幕上太宽，就不会与背景重叠。因此，此解决方案也适用于快速响应。