人事クラス二重枠

Question

私は私はこのような二重枠を作成する方法を把握しようとしている.csshrクラス

であなたの助けを要請しています：

ここで私は何ですやった：

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）inline-blockを2行下に取り除くにはどうすればよいですか？私はinline-block文を削除してみましたが、動作しません。

2）font-familyとこれにフォントサイズを追加できますか？

3）幅を増やすことなく2行の間のスペースを増やすことはできますか？

Answer 1

これにチェックを持っていてください -

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; 
    } 

Answer 2

基本的に私はそれを違うと信じています。行のafterと：beforeを使用すると、その行の上にテキストを置くことに大幅に役立ちます。

私はこのCodePenをあなたのために用意しました。基本的に私がしたのは：afterとa：before（私が前にあなたに言ったように）を境界線として使用した後、境界線の上に背景色（この場合は白色）の範囲を追加しました（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; 
    } 
} 

これはdemoです。

こちらがお役に立てば幸いです。