ホーム(記事一覧)へ

CSSで下線(border-bottom・underline)の位置を調整する方法

CSSで下線の位置を調整する方法

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

リンクによくついている下線(border-bottom・underline)のデザインにこだわりたい!

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

前提 text-decoration: underlineでは下線を調整できない

↑上記のような、よくリンクでつかわれるtext-decoration: underlineは、色は変えられても位置や太さを変えられません。
そこで他の方法で下線をデザインします。

方法1.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で左右のスペースを確保するとその分下線を左右に広げることができます。

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

方法2.疑似要素と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;
}

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

まとめ

CSSで下線の位置や太さを変えるには、text-decoration: underlineでは調整できない。

方法1.border-bottomで調整する(比較的簡単かつ単純)

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

以上、CSSで下線(border-bottom・underline)の位置を調整する方法でした。

関連記事