【CSS】マーカー風の下線(アンダーライン)を引く方法

マーカー風の下線(アンダーライン)を引く

css では【CSS】簡単な下線(アンダーライン)の引き方【HTML】にあるように簡単に下線の実装ができます。今回実装したいマーカー風の下線(アンダーライン)ですが、少し css を工夫することでこちらも簡単に実装できます。

マーカー風の下線(アンダーライン)を引くサンプル

改行を含む場合でも以下のようにマーカーが引かれます。

マーカー風の
下線(アンダーライン)を引くサンプル

また、border では調整できないマーカーの縦幅やグラデーションも調整できます。

縦幅を変更

縦幅が広いマーカー
マーカー風の下線(アンダーライン)を引くサンプル

縦幅が狭いマーカー
マーカー風の下線(アンダーライン)を引くサンプル

グラデーションを付ける

通常のマーカー
マーカー風の下線(アンダーライン)を引くサンプル

グラデーションがあるマーカー
マーカー風の下線(アンダーライン)を引くサンプル

サンプルコード

HTML

<span class="marker">マーカー風の下線(アンダーライン)を引くサンプル</span>

CSS

.marker {
  background: linear-gradient(transparent 60%, #87cefa 60%);
}

サンプルコードは一番最初に紹介した通常のマーカーのコードです。
今回使用した linear-gradient ですが、プロパティを変更するだけでマーカーの縦幅やグラデーションを調整できます。

まず上記の CSS の解説ですが、プロパティが省略されているので、省略せずに書くと下記のようになります。

.marker {
  background: linear-gradient(to bottom, transparent 0% 60%, #87cefa 60% 100%);
}

linear-gradient の第 1 引数は指定した方向に向かってグラデーションを作ることを意味しています(to bottom は下方向に向かって)。第 2 引数は要素の 0% から 60% に transparent を指定しています。第 3 引数は要素の 60% から 100% に #87cefa を指定しています。linear-gradient はグラデーションを簡単に再現できる関数ですが、グラデーションを作る隙間を設けていないので、単色を表現しているということです。マーカーの縦幅は色指定の後のパーセンテージで調整できます。

例のグラデーション付きマーカーについては、

.marker {
  background: linear-gradient(transparent, #87cefa);
}

とすることで、transparent から自然に #87cefa になるようなグラデーションとなります。
今回は下方向へのグラデーションを用いましたが、上・左右方向や、角度を指定したグラデーションも簡単に作ることができます。

以上、マーカー風の下線(アンダーライン)を引く方法をご紹介しました。