Css Hr类双边界

我请求您帮助我学习

.css

hr

课程

我想知道如何制作这样的双边框：

以下是我所做的：

hr.style15 {
    border-top: 4px double black;
}
hr.style15:after {
    content: 'SHIPPING INFO';
    display: inline-block;
    position: relative;
    top: -15px;
    left: 40px;
    padding: 0 10px;
    background: #f0f0f0;
    color: #8c8b8b;
    font-size: 18px;
}

我的问题是：

1） 如何去掉两行下面的

内联块

？我尝试过删除

内联块

语句，但没有效果

2） 我可以添加

字体系列

和字体大小吗

---

3） 有没有可能在不增加宽度的情况下增加两行之间的间距？

基本上我认为我会采取不同的做法。在行中同时使用：after和：before将有助于您在上面添加文本

所以我为你准备了这个密码笔。基本上，我所做的是使用：after和：before（正如我之前告诉过你的）作为边界线，然后我在边界线的顶部添加了一个带有背景色（在本例中为白色）的跨度（查看z索引）

你可以看到这一点

---

我希望这有帮助

请检查一下：-

HTML

<h1 class="title"><span>Shipping info</span></h1>

---

您可以将其作为可运行的示例

<h1 class="title"><span>Shipping info</span></h1>

    h1.title {
        margin-top: 0;
        position: relative;
    }
    h1.title:before {
        content: "";
        display: block;
        border-top: solid 1px black;
        width: 100%;
        height: 2px;
        position: absolute;
        top: 50%;
        z-index: 1;
        border-bottom: 1px solid #000;
    }

    h1.title span {
       background: #fff;
       padding: 0 20px;
       position: relative;
       z-index: 5;
       margin-left: 50px;
    }