【CSS】文字に線を引く方法

ろん
ろん

文字に線を引く方法を紹介します。

HTML

<span class="under_line">電脳ブログ</span>

線を引きたい部分を<span class="under_line"></span>で囲みます。

<p>電脳ブログは<span class="under_line">こちら</span>をクリック</p>

文章の場合は上記のようになり、こちらに線が引かれます。

まずは、無難な下線を引く方法を手短に2つ紹介します。

下線

電脳ブログ

.under_line{ text-decoration: underline; }

下線

電脳ブログ

.under_line{ border-bottom: solid; }

text-decorationborder-bottomを使う方法です。border-bottomは文字と線の間に少し隙間ができますね。

text-decoration

まずは、text-decorationを使った方法をご紹介します。text-decorationは、線の位置、形状、色、太さが指定できます。

取り消し線

電脳ブログ

.under_line{ text-decoration: line-through; }

上線

電脳ブログ

.under_line{ text-decoration: overline; }

色を変える

電脳ブログ

.under_line{ text-decoration: underline #00d138; }

点線

電脳ブログ

.under_line{ text-decoration: underline dotted #00d138; }

波線

電脳ブログ

.under_line{ text-decoration: underline wavy #00d138; }

太さを変える

電脳ブログ

.under_line{ text-decoration: underline 10px #00d138; }

線を非表示にする

電脳ブログ

.under_line{ text-decoration: none; }

border-bottom

次に、border-bottomを使った方法をご紹介します。border-bottomは、形状、色、太さが指定できます。

色を変える

電脳ブログ

.under_line{ border-bottom: solid #ff0800; }

太さを変える

電脳ブログ

.under_line{ border-bottom: solid 10px #ff0800; }

点線

電脳ブログ

.under_line{ border-bottom: dotted #ff0800; }

破線

電脳ブログ

.under_line{ border-bottom: dashed #ff0800; }

二重線

電脳ブログ

.under_line{ border-bottom: thick double #ff0800; }

おまけ

蛍光ペンで引いたような線をつける方法を紹介します。HTMLは同じです。

全体に引く

電脳ブログ

.under_line{ background: #ffff6e; }

下半分に引く

電脳ブログ

.under_line{ background: linear-gradient(transparent 60%, #ffff6e 60%); }

transparentは透明を示します。上から60%は透明で、残りに色を付けるという意味になります。数値は好きなように調節してください。

関連記事