文字の横に線(ライン)を引く方法2
文字に右側だけに短いライン
ただし、画面が狭くなるとflexboxが影響して崩れるので、折り返さないサイズに納める必要がある。
<p>タイトル</p>
文字の右側のみにラインを引く場合
p { display: flex; align-items: center; &::after { background: #333; content: ""; height: 1px; width: 3em; margin-left: 1em; } }
左右両方にラインを引く場合
p { display: flex; align-items: center; justify-content: center; &::before, &::after { background: #333; content: ""; height: 1px; width: 3em; } &::before { margin-right: 1em; } &::after { margin-left: 1em; } }
justify-content で中央揃えにしている。