CSSでリンクの文字と下線の間隔（スペース）を空ける方法

CSSでリンクの文字と下線の間隔（スペース）を空ける方法を紹介します。ビギナー向けの内容です。 変更前 変更後 １．リンクの文字と下線の間隔を空ける リンクの文字と下線の間隔を空けるには、CSSの罫線（borderプロパティ）を擬似的に利用することで実現します。 具体的には、以下のようなCSSを設定します。a要素にclass属性「foo」を設定し、CSSにクラスセレクタ「.foo」を追加します。 HTML <a class="foo" href="...">テストです</a> CSS .foo { text-decoration: none; border-bottom: 1px solid blue; padding-bottom: 2px; } 実際に設定する場合、class属性値は「foo」ではなく、意味のある適切な名称を設定してください。 ２．プロパティの説明 １項で利用しているC

[lupinus725]

ちょっとした工夫でね、いい感じ！

[baba_jdl]

テキストとアンダーラインの隙間

[kiyokichi]

text-decorationじゃなくてborderを使うとか。