CSSだけでぼかした色鉛筆？っぽい優しいアンダーライン（下線）を引いてみる

文章中や見出しなどにつかう下線の装飾には色々あります。
代表的なのが蛍光ペンCSSでしょう。

しかし私の本サイトは手書き風の見出しを使っているのですが、蛍光ペンCSSはきつすぎて合わない。
もっと優しくて柔らかくて軽いパステルタッチな下線が引きたい！

そこで色鉛筆やクレヨン風味のアンダーラインCSSを探してみました。
しかし、ない。

いえ、クレヨンはあったのですが、

画像ファイルは使いたくないよ……

仕方ないので、それっぽく見せるCSSを作ってみました。
一行なので作ったというほどでもありませんが使い途はあると思います。

使用見本

コード

文章内で使う場合

プラグインAddQuicktag に登録しておくと便利に使えます。

上記画像の色（水色？）

See the Pen 色鉛筆（ぼかし）下線　水色？ by 天満川鈴 (@kimoota) on CodePen.

黄色

See the Pen 色鉛筆（ぼかし）黄色下線 by 天満川鈴 (@kimoota) on CodePen.

ピンク

See the Pen 色鉛筆（ぼかし）下線　ピンク by 天満川鈴 (@kimoota) on CodePen.

見出しなどに使う場合

次のコードをstyle.cssに記述します。

See the Pen 色鉛筆見出し by 天満川鈴 (@kimoota) on CodePen.

蛍光ペンCSSとの比較

色鉛筆： 色鉛筆です。

蛍光ペン： 蛍光ペンです。

同じ色でも全く印象違うのがおわかりになるかと。
蛍光ペンのCSSはこちら。

See the Pen 蛍光ペン（比較用） by 天満川鈴 (@kimoota) on CodePen.

色鉛筆？風味なアンダーラインCSSの説明

box-shadowは複数の影を組み合わせることができる

これはbox-shadowで二つの影を作って組み合わせたもの。
カンマ区切りで組み合わせることができます。

box-shadow{【一つ目の影】,【二つ目の影】;}

box-shadowの値指定

今回のCSSではbox-shadow{a b c d 色コード inset;}においては5or6個の値を指定しています。

これらを組み合わせて色鉛筆（？）ぽくしたわけです。
値を変えれば何となくクレヨンというか水彩ペンっぽくなります。
ただ影の広がりを抑え込むためにdをマイナス指定しないといけないので、線の端に段差ができてしまいます。
もう少しうまくやる方法はあるのでしょうが、そこまでCSSに詳しくないですし妥協しました。

色変更

<span style="box-shadow: 0px -6px 5px -5px #92FCFC inset,0px 8px 4px -8px #92FCFC;">色鉛筆です。</span>

色コードを変えれば好きな色にできます。
ただし上に挙げた通り淡い色系のみ。
原色系や濃い色は基本的にアウト、表示がおかしくなります。
（調整できるならいいのですが）

青色を例にとると、こんな感じになってしまいます。

色鉛筆です。

まとめ

よかったら使ってみて
もっといい方法あれば教えていただけると嬉しいです