擬似要素beforeとafterでテキストの左右に線を付ける方法（必須）

例えば↓みたいに文章の左右に横線を付けるとします。

こんな時はcss擬似要素の「before」と「after」を使えばできます。

beforeとafterの使い方

ちなみに「bofore」は要素の直前に表示したい内容を追加することができて「after」は要素の直後に表示したい内容を追加することができます。

「テキストテキスト」の左右に線をつけるためのコードは↓です。

「テキストテキスト」の左側に付けたい内容をbeforeで書いて「テキストテキスト」の右側に付けたい内容をafterで書きます。

「テキストテキスト」の左にある線のコードは8行目〜12行目で「テキストテキスト」の右にある線のコードは13行目〜17行目です。

11行目と16行目のwidthがないと長さが無くて線が表示されないので必ずつけてください。

また19行目のdisplay:flexがないと横並びにすることができないので必ずつけてください。

線以外をテキストテキストの左右に並べる方法

「テキストテキスト」の左右に線ではなく文字を並べるとします。

その時はcontent:’  ‘とするのではなくcontent:’並べたい文字’としてください。

具体的なコードは↓になります。

これで↓になります。

●いいねをつけてもらえると励みになります。