CSSで見出しの左右に横線を入れるなら、Flexboxと疑似要素の::before・::afterを使う方法が簡単です。
画像を用意する必要はなく、横線の長さ・太さ・色・見出しとの余白もCSSだけで自由に調整できます。この記事では、そのまま使える基本コードからスマホ対応まで紹介します。
完成イメージ
今回のコードを適用すると、次のように見出しの左右へ横線を表示できます。
見出しの左右に横線を入れる基本コード
まずは、見出しをspanで囲んだHTMLを用意します。
HTML
<h2 class="heading-line">
<span>見出しタイトル</span>
</h2>CSS
.heading-line {
--line-width: 80px;
--line-thickness: 1px;
--line-color: #333;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 0;
text-align: center;
}
.heading-line::before,
.heading-line::after {
flex: 0 0 var(--line-width);
height: var(--line-thickness);
background-color: var(--line-color);
content: "";
}display: flexで見出しと横線を横並びにし、align-items: centerで横線を文字の上下中央に配置しています。
左右の横線は疑似要素で作っているため、HTMLに装飾用の要素を追加する必要はありません。
横線の長さを変更する方法
横線の長さは、--line-widthの数値で変更できます。
.heading-line {
--line-width: 120px;
}短くしたい場合は40px、長くしたい場合は120pxなど、デザインに合わせて調整してください。左右の横線には同じ幅が適用されます。
横線の太さ・色・余白を変更する方法
横線の太さは--line-thickness、色は--line-color、見出しとの余白はgapで変更できます。
.heading-line {
--line-width: 100px;
--line-thickness: 2px;
--line-color: #0f172a;
gap: 24px;
}--line-width：横線の長さ--line-thickness：横線の太さ--line-color：横線の色gap：見出しと横線の間隔
横線を余った幅に合わせて伸ばす方法
横線を固定幅ではなく、見出しの左右にある余白へ合わせて伸ばしたい場合は、疑似要素のflexを変更します。
.heading-line::before,
.heading-line::after {
flex: 1 1 0;
max-width: 160px;
}max-widthを指定すると、画面が広い場合でも横線が長くなりすぎません。横幅いっぱいまで伸ばしたい場合は、max-widthを削除してください。
スマホでは横線を短くする
PCと同じ長さの横線をスマホでも使用すると、見出しが窮屈になったり、不自然に改行されたりする場合があります。メディアクエリを使い、スマホでは横線と余白を短くします。
@media screen and (max-width: 768px) {
.heading-line {
--line-width: 32px;
gap: 10px;
font-size: 20px;
}
}見出しの文字数が多い場合は、横線の幅だけでなくgapや文字サイズも一緒に調整すると収まりやすくなります。
片側だけに横線を表示する方法
右側だけに横線を表示する場合は、左側の疑似要素を非表示にします。
.heading-line::before {
display: none;
}左側だけに横線を表示したい場合は、::beforeではなく::afterを非表示にしてください。
横線が表示されないときの確認ポイント
- 疑似要素に
content: ""が指定されているか - 横線の
widthまたはflex-basisが0になっていないか - 横線の
heightが0になっていないか - 背景色がページの背景色と同じになっていないか
- 別のCSSで疑似要素が上書きされていないか
特にcontent: ""を忘れると、::beforeと::after自体が表示されないため注意してください。
まとめ
見出しの左右に横線を入れる場合は、Flexboxと疑似要素を組み合わせるとシンプルに実装できます。
横線の長さは--line-width、太さは--line-thickness、色は--line-color、余白はgapで調整できます。スマホ用の指定も追加し、見出しの文字数や画面幅に合わせて仕上げてみてください。
