CSSで下線(border-bottom･text-decoration:underline)の位置調整

こんにちは。テイクです。ホームページを作り続けて9年になります。

リンクによくついている下線（border-bottom・text-decoration:underline）のデザインにこだわりたい！

そんな「CSSで下線の位置や太さを調整する方法」を説明します。

方法1.text-underline-offset

<style>
.example{
    text-underline-offset:0.5em;
}
</style>
<a href="#">普通のリンク</a>　<a href="#" class="example">位置調整したリンク</a>

「text-underline-offset」は「text-decoration: underline」の位置を縦方向に調節できるCSSです。

下線をリンクから少し離したいときに便利です。

太さや長さは変更できません。

また、IEでは効きません。

IEでも効かせたい場合は下記の方法をおススメします。

方法2.border-bottomを使う

これはブロック要素の場合です。

完成イメージ

html

<div class="border-underline">
    テキスト
</div>

CSS

.border-underline{
    padding: 10px;
    border-bottom: 2px solid #333;
}

border-bottomであれば太さ、位置を調整できます。

太さはborder-bottom-width、位置はpadding-bottomで調整しましょう。

ブロック要素・インライン要素って何？というかたはこちら↓

インライン要素にも使える

完成イメージ

html

<p>前のテキスト<a class="border-underline2">リンクリンクリンクリンクリンクリンクリンクリンクリンクリンクリンクリンクリンクリンク</a>後ろのテキスト</p>

CSS

.border-underline2{
    padding: 0;
    border-bottom: 2px solid blue;
    text-decoration: none;
    color: blue;
}

こちらはインライン要素、つまりaタグなどにCSSを指定した場合です。2pxの下線が2行目にも適用されるのがわかるでしょうか。

border-bottomの位置はpadding-bottomを使うことで下方向へ調節できます。

しかしpaddingは「-（マイナス）」を使えません。border-bottomの上方向の調整はインライン要素のline-heightに依存します。

下線をギリギリまで近づけたいなら、aタグの子要素のline-heightを1にする

完成イメージ

html

<p>前のテキスト<a href="#" class="border-underline3"><span>リンクリンクリンクリンク</span></a>後ろのテキスト</p>

CSS

.border-underline3{
    text-decoration: none;
}
    
.border-underline3 span{
    display: inline-block;
    padding: 0;
    border-bottom: 2px solid blue;
    text-decoration: none;
    color: blue;
    line-height: 1;
}

aタグのline-heightを1にするとaの外にあるテキストまでline-height:1となり読みにくい行間になってしまいます。

そのためaタグの子要素にspanを用意し、それにline-height:1とdisplay: inline-blockを指定します。

ただし、display: inline-blockを指定しているため改行時はa要素全体が改行されます。

CSSにおけるdisplayについてはこちら↓

線をはみ出したいならpaddingで調整

完成イメージ

html

<p>前のテキスト<a class="border-underline4">リンク</a>後ろのテキスト</p>

CSS

.border-underline4{
    padding: 0 10px;/*コレ*/
    border-bottom: 2px solid blue;
    text-decoration: none;
    color: blue;
}

paddingで左右のスペースを確保するとその分下線を左右に広げることができます。

インライン要素では広がらないのでインラインブロックにしましょう。

方法3.疑似要素とposition:absoluteを使う

疑似要素beforeやafterを線にしてposition:absoluteで細かい位置調整をします。

border-bottomを使う方法に比べて難易度は高いですが、イメージ通りのデザインにできる可能性が高くなります。

またhoverアクションをつけることも可能です。

完成イメージ

↑マウスを乗せると下線が動きます。

html

<div class="border-underline5">下線の位置を変える</div>

CSS

.border-underline5{
    border: 1px solid #333;
    padding: 10px;
    display: inline-block;
    background: #f2f2f2;
    position: relative;
}
.border-underline5::after{
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    background: #000;
    position: absolute;
    bottom: 6px;
    left: 0;
    right: 0;
    margin: auto;
    transition: .3s;
}
.border-underline5:hover::after{
    width: 0;
}

この方法は文中のテキストに下線を引く、というよりはメニューなど装飾としての下線に向いています。

まとめ

方法1.text-underline-offsetを指定する（IEでは効かない）

方法2.border-bottomで調整する（比較的簡単かつ単純）

方法3.疑似要素とposition:absoluteを使う（難しい代わりに複雑な表現が可能）

以上、CSSで下線（border-bottom・text-decoration:underline）の位置を調整する方法でした。