見出しの下線の長さを変える方法

paddingや疑似要素を使って見出しの下線の長さを変更する方法を記述します。

前に見出しと下線との間隔を広げる「見出しに文字の長さだけ間隔をあけて下線を引く方法」を掲載しました。今回はその続きで見出しの下線の長さを変える方法を記述します。
今回のサンプルでは、h2のフォントサイズは24pxにしています。

paddingを使って下線を見出しより長くする

paddingを使って下線を見出しより長くする場合は、左右どちらかや左右両方の長さを変更することができます。今回のサンプルでは両方の長さを変えます。

HTML

<div class="sample1">
    <h2 class="uline">見出しです</h2>
</div>

CSS

.sample1 {
	border: 1px solid #eee;
	text-align: center;
}
.sample1 h2 {
	margin: 8px 0 32px 0;
	padding: 8px 0;
}
.sample1 .uline {
	padding: 0 24px 8px;	/* 左右24px長くする */
	border-bottom: 2px solid #000;
	display: inline-block;
}

.ulineのpaddingで左右に24pxの余白を作りborder-bottomで下線を作っています。
borderは要素のサイズと同じになるのでpaddingを使って長さを調整できます。

疑似要素のbeforeを使って下線を見出しより長くする

疑似要素のbeforeを使用して下線を引きます。
下線の長さは直接ピクセル数をセットではなく、％を使ってセットします。文字数が変わった場合に再計算するのが面倒なため。

HTML

<div class="sample2">
    <h2>見出しです</h2>
</div>

CSS

.sample2 {
	border: 1px solid #eee;
	text-align: center;
}
.sample2 h2 {
	margin: 8px 0 32px 0;
	padding: 8px 0 0;
	position: relative;
	display: inline-block;
}
.sample2 h2::before {
	content: "";
	width: 150%;	/* 線の長さ */
	height: 2px;	/* 線の太さ */
	bottom: -8px;	/* 線の縦の開始位置 */
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background: #000;
}

h2をinline-blockに変更します。
widthで線の長さ、heightで線の太さを設定します。
bottomで文字との上下の間隔を設定します。bottom:0で文字のすぐ下に表示され、マイナスの値が大きいほど文字から離れていきます。
下線のセンタリングには、left:50%、transform:translateX(-50%);にすることで実現できます。

疑似要素のbeforeを使って下線を見出しより短くする

文字より下線の方が短い場合は、paddingでは実現できませんので疑似要素のbeforeを使います。

HTML

<div class="sample3">
    <h2>見出しです</h2>
</div>

CSS

.sample3 {
	border: 1px solid #eee;
	text-align: center;
}
.sample3 h2 {
	margin: 8px 0 32px 0;
	padding: 8px 0 0;
	position: relative;
	display: inline-block;
}
.sample3 h2::before {
	content: "";
	width: 50%;	/* 線の長さ */
	height: 2px;	/* 線の太さ */
	bottom: -8px;	/* 線の縦の開始位置 */
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background: #000;
}

下線を短くするには、widthの値を100%より小さい値を設定します。
設定する値はwidthの値以外は、長くするパターンと同じです。

疑似要素を使って上線と下線を表示する

疑似要素のbeforeとafterを使って上下に線を引きます。
例では上線はbeforeを使って見出しより長く、下線はafterを使って見出しより短くします。

HTML

<div class="sample4">
    <h2>見出しです</h2>
</div>

CSS

.sample4 {
	border: 1px solid #eee;
	text-align: center;
}
.sample4 h2 {
	font-size: 24px;
	margin: 8px 0 32px 0;
	padding: 0;
	position: relative;
	display: inline-block;
}
.sample4 h2::before {
	content: "";
	width: 150%;
	height: 2px;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background: #000;
}
.sample4 h2::after {
	content: "";
	width: 50%;
	height: 2px;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	position: absolute;
	background: #000;
}

上線の場合は、h2のpaddingを０にし、疑似要素のbeforeのtopの値で文字との間隔を決めます。

最後に

見出しに下線を引くのにpaddingと疑似要素の２つの方法を示しましたが、個人的には疑似要素の方が良いかなと思います。