【Q&A】文字の下線の引き方

こんにちは、@codeship_techです。

本日の質問がこちら。

文字に下線をどうやって引けばいいですか？？

ということで、文字の下線についての質問ですね。

下線はwebサイト内の文字を目立たせたい、お洒落に見せたい時によく使いますよね。
実は線の引き方はいくつかパターンがあるんです！

それではこちらの質問に答えていきます。

text-decoration、border、擬似要素の3パターンで書けます！

作り方は他にもあると思いますが、頻繁に使われている作り方は3パターンかと思います。

ではそれぞれ解説していきます。

①text-decorationを使用して下線を引く場合

text-decorationはみなさん馴染みがありますよね！
よく使うaタグに初期設定として引かれている下線がtext-decorationです。

このプロパティではシンプルな線のみ引くことができます。

色は文字色と同じくcolor:〇〇;　で変更可能です。

p{
 text-decoration:underline;
 color:#f00;/*色を赤に*/
}

②borderを使用して線を引く場合

この作り方を使う人が多いのではないでしょうか。

borderを使うことで、普通の線だけでなく様々な種類の線を引くことができます。

一番シンプルなパターンは

border-bottom: solid 1px #00f;
　　　　　　　　　|線の種類|太さ|色|

このように記述します。
その他にも、

border-bottom: dashed 2px red; /*破線*/
border-bottom: double 2px red; /*二重線*/
border-bottom: dotted 2px red; /*点線*/

様々な種類の線を引くことができます。

ただし、弱点もあります。
それは、borderは文字の持っている領域にのみ適用されることです。

つまり、線の位置や長さなどは全て文字の大きさ（文字の領域）に依存するということです。
シンプルに線を引きたいだけならおススメですが、もし長さを変えたい、特殊な場所に線を使用したい場合にはborderでは線を引くのが難しくなります。

そこで、おススメするのが次に紹介する疑似要素を使った線の引き方です。

③擬似要素を使って線を引く場合

みなさんは擬似要素をご存知でしょうか。
すごく便利なもので、簡単に言えばHTMLに記述しなくとも、CSSだけいろいろできる書き方です。

文字の色を先頭だけ変えたい場合に使う
〇〇:: first-letter
は擬似要素の１つです。

今回は擬似要素を使用してdivのような箱を文字の下に作成しheightを小さくすることで、 “線のように見える箱”を作ります。

  <h2>Hello, World!!</h2>

h2::after{
    content: '';
    display: block;
    background: #BD0404;
    height: 3px;
    width: 28px;
    margin-top: 5px;
}

このように記述をすることで下線を引けます。

次回、この方法を使用した上下左右の線の引き方、擬似要素、diplayなどを詳しく解説します。

本日は、文字の下線の引き方について解説しました。