2022-08-22

HTML・CSS: 線の間に文字を入れる

HTMLのhrタグを使用して区切り線（水平線）を挿入することができますが、 区切り線の間に文字を入れることもできます。 「hr::before」疑似要素を使用するのがポイントです。

サンプルは下のようになります。
hrの太さは2px、色はsilverに設定しています。

---

サンプルコード

hr要素に対するCSSのコードは次の通りです。 コピペして若干のアレンジを加えれば使用できます。

hr {
	border: none;
	border-top: 2px solid silver;
	text-align: center;
	
}

hr::before {
	content: "間に入れるコンテンツ";
	display: inline-block;
	position: relative;
	top: -10px;
	padding: 0 20px;
	background-color: #FFF;
}

コード解説

「hr::before」疑似要素の「content」プロパティに、 線の間に入れたい文字を設定します。

「background-color」プロパティはご自身のWebサイトの背景色と 同じ色を設定してください。 この設定がないと文字部分の線が消えません。

「top」プロパティは文字の大きさ等に応じて微調整してください。 フォントサイズが16pxの場合、topプロパティの値は 「 -10px ～ -12px」くらいが妥当な設定値です。