見出しに文字の長さだけ間隔をあけて下線を引く

通常下線を引くときは、text-decoration: underline を使用しますが、文字と下線の間隔を広げることができません。間隔を広げたいときは、border-bottom を使用します。見出しで文字分の長さだけ下線を引くときは以下のようにします。

サンプル

見出しを中央合わせにして「見出しです」の文字分だけ下線を引きます。

このサンプルでは以下のhtmlとcssを使っています。

html

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

CSS

h2 の padding の左右の値を０にして、uline の display を inline-block にすることで文字の長さだけの下線を引くことができます。
文字と下線の間隔を変える場合は、padding-bottom の値を変えます。

.sample {
	text-align: center;
}
.sample h2 {
	padding: 8px 0;
}
.uline {
	padding-bottom: 8px;
	border-bottom: 2px solid #000;
	display: inline-block;
}

逆に、h2 の padding の左右に値を入れることで下線の長さを変えることができます。