[CSS] 蛍光ペン風の下線をかわいく、きれいにする
細い蛍光ペン風の下線を引きたかったので、それまでの方法をまとめました。
蛍光ペン風の線には、
background: linear-gradientを使います。
蛍光ペン風の下線の書き方
準備
グラデーションを書く
background: linear-gradientを使います。
background: linear-gradient(上の色 開始位置, 下の色 開始位置);
background: linear-gradient(transparent 35%, orange 35%, blue 70%);と書くと、こうなります。
最初のtransparentと次の色の%は同じにしないと、中間がグレーになってしまいます。その例を示します。
background: linear-gradient(transparent 10%, orange 35%, blue 70%);と書くと、こうなります（デバイスやブラウザによって見え方が違うようです）。
蛍光ペンっぽい色にする
background: linear-gradient(transparent 0%, #a8eaff 0%);と書くと、こうなります。
蛍光ペンっぽく、にじませる
次のように、使いたい色の上下を、薄い色で挟みます。
background: linear-gradient(透明, 薄い色, 濃い色, 薄い色);
background: linear-gradient(transparent 10%, #e6f9ff 10%, #a8eaff 80%, #e6f9ff 100%);と書くと、こうなります。
普通の蛍光ペン
background: linear-gradient(transparent 20%, #e6f9ff 20%, #a8eaff 80%, #e6f9ff 100%);と書くと、こうなります。
細い蛍光ペン風（線を丸くする）
準備
線を丸くしておきます。
background-color: blue;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;と書くと、こうなります。
これを、グラデーションにします。（transparentの%を大きくして、線を細くします）
background: linear-gradient(transparent 40%, lightblue 40%, blue 80%, lightblue 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;と書くと、こうなります。
細い蛍光ペン風
これを、蛍光ペンっぽい色で書きます。
background: linear-gradient(transparent 40%, #e6f9ff 40%, #a8eaff 80%, #e6f9ff 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;と書くと、こうなります。
どうでしょう。きれいな蛍光ペン（細いペンで書いたとき）みたいになったのではないでしょうか？
最後に：いろんな色の細い蛍光ペン
いろんな色で書いてみました。よかったら使ってください。
線の両端を丸くする処理は記載を省いてあります（詳しくは 1.3 細い蛍光ペン風（線を丸くする） を見てください）。
サンプルああああああああああああああああああああ
background: linear-gradient(transparent 40%, #e6f9ff 40%, #a8eaff 80%, #e6f9ff 100%);サンプルああああああああああああああああああああ
background: linear-gradient(transparent 40%, #ccffd5 40%, #80ff97 80%, #ccffd5 100%);サンプルああああああああああああああああああああ
background: linear-gradient(transparent 40%, #ffefcc 40%, #ffdf99 80%, #ffefcc 100%);サンプルああああああああああああああああああああ
background: linear-gradient(transparent 40%, #ffccd4 40%, #ff8095 80%, #ffccd4 100%);サンプルああああああああああああああああああああ
background: linear-gradient(transparent 40%, #e6ccff 40%, #c180ff 80%, #e6ccff 100%);