行の前/左と後/右のテキスト

Question

私はh3を持っていて、前に/左と後/右のDAY-BY-DAYの語を持っていますが、上と下の行:: afterと:: beforeを使ってその単語を削除します。どのように私はフレックスでこれを達成できますか、助けてください。

何かDAY-BY-DAY ----のような----ここ

はhtmlです：ここでは

<h3 id ="daybyday"><span style="font-style: italic; font-size: 23px; color: #7B7B7A;">DAY-BY-DAY</span><`/h3>` 

はCSSです：

#daybyday::before { 
      content: ""; 
      display: block; 
      background: salmon; 
      height: 5px; 
     } 

     #daybyday::after { 
      content: ""; 
      display: block; 
      background: salmon; 
      height: 5px; 
     } 

Answer 1

このようなものが欲しいですか？ >について - >垂直センタリングのためにとjustify-content:center -

だから私たちはここで行う、私たちはcolor: salmonと5pxの高さのdivを作成しているもの、そして我々は、フレックスプロパティ（align-items:centerを使用することにより、display:flexを使用して要素のフレックスプロパティを設定します水平方向のセンタリングは、我々はそれが見えないように、私は、background-color:whiteを設定し、最後に目に見えることからh3要素の背後にあるdivのを防ぐために、ラインの中央にh3要素を取得することができます！

#daybyday { 
 
    display: inline; 
 
    background-color:white; 
 
} 
 

 
.text-special { 
 
    font-style: italic; 
 
    font-size: 23px; 
 
    color: #7B7B7A; 
 
} 
 

 
.line { 
 
    background-color: salmon; 
 
    height: 5px; 
 
    position:relative; 
 
    display:flex; 
 
    align-items:center; 
 
    justify-content:center; 
 
}

<div class="line"> 
 
    <h3 id="daybyday"><span class="text-special">DAY-BY-DAY</span></h3> 
 
    <div>