Hr class double border - css

Question

I'm requesting your help with a .css hr class
I'm trying to figure out how to make a double border like this:
Here's what i did:
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;
}
My questions are:
1) How do I get rid of the inline-block below the 2 lines? I've tried by deleting the inline-block sentence but it doesn't work.
2) Can I add font-family and font size to this?
3) Is it possible to increase the space between the 2 lines without increasing the width?

Answer 1

Basically I believe I'd do it differently. Using both :after and :before for the lines will help you drastically on putting a text on top of it.
So I prepared this CodePen for you. Basically what I did was using an :after and a :before (as I told you before) for the border-lines and after that I added a span with a background-color (in this case white) on top of the border-lines (look at the z-index).
.container {
width: 800px;
position: relative;
}
.double-bar {
&:after {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 9px;
left: 0;
z-index: 1;
}
&:before {
content: "";
border-bottom: 1px solid black;
width: 100%;
position: absolute;
top: 13px;
left: 0;
z-index: 1;
}
span {
z-index: 2;
position: relative;
background-color: white;
left: 40px;
padding: 0 7.5px;
text-transform: uppercase;
font-weight: 600;
font-size: 20px;
}
}
You can see a demo of this.
I hope this helps!

Answer 2

Please have a check with this:-
HTML
<h1 class="title"><span>Shipping info</span></h1>
CSS
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;
}