【CSS】下線を引く4つの方法（テキスト効果、ボーダー、背景、要素）

Keisuke Ota

こんにちは、けいすけです。

今回は、CSSでテキストに下線を引く際に使える4つの方法について、紹介したいと思います。

目次 [表示する]

  1. text-decoration: underline;を使用する方法
  2. border-bottomを使用する方法
  3. background: linear-gradient();を使用する方法
  4. その他の要素を使用する方法

text-decoration: underline;を使用する方法

CSS

                            
span {
    text-decoration: underline;
}

こちらは、最も簡単に下線を引くことができる方法です。

色や太さ、線の種類を変更することは、可能ですが、文字と線の間隔の細かい調整ができません。

とりあえず下線を引きたいというときにおすすめの方法です。

border-bottomを使用する方法

CSS

                            
span {
    border-bottom: 1px solid #000;
}

こちらも比較的簡単に下線を引くことができる方法です。

色や太さ、線の種類を変更可能であり、paddingにより、文字と線の間隔を細かく調整することが可能です。

下線と文字の間隔を調整したいというときに適した方法です。

background: linear-gradient();を使用する方法

CSS

                            
span {
    background: linear-gradient(
        0deg, 
        transparent 5%, 
        yellow 5%, 
        yellow 30%, 
        transparent 30%
    );
}

こちらの下線を引く方法は、位置の調整が少し難しいです。

色や太さ、線の位置を変更することは可能ですが、線の種類を変更することができません。

また、線の位置は、背景の領域に限られます。

下線にかぶせる形で文字を配置することで、テキスト中の文字を、より目立たせたいというときに適した方法です。

その他の要素を使用する方法

CSS

                            
span {
    position: relative;
}

span::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #000;
    left: 0;
    bottom: 0;
}

こちらの下線を引く方法は、独立して線を引く分、他よりも手間がかかります。

また、レスポンシブデザインにより改行されるテキスト中での適用は、レイアウトが崩れる要因となります。

しかし、線の長さをテキストよりも短くすることや、border-topとborder-bottomを利用した二重線を引くことなどができるようになります。

加えて、transformによってさまざまな動きを付けることができます。

クリックなどのイベント発生時にアニメーションさせたいというときや、デザイン上ほかの方法だと引けないというときに適した方法です。

Related