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

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

グラデーションを付ける

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

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

サンプルコード

HTML

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

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 になるようなグラデーションとなります。
今回は下方向へのグラデーションを用いましたが、上・左右方向や、角度を指定したグラデーションも簡単に作ることができます。