ペイントストローク アンダーライン
クレヨンや絵筆で引いたような、少し歪んだ手描き感のあるアンダーラインが見出しの下にスーッと描かれる演出です。線の正体は ::after 疑似要素で、四隅をバラバラの border-radius にして筆跡らしいムラを作り、 rotate でわずかに傾けています。
解説
クレヨンや絵筆で引いたような、少し歪んだ手描き感のあるアンダーラインが見出しの下にスーッと描かれる演出です。線の正体は ::after 疑似要素で、四隅をバラバラの border-radius にして筆跡らしいムラを作り、rotate でわずかに傾けています。アニメーションは scaleX を 0 から 1 へ transform-origin:left 起点で広げることで、左から右へ引かれる動きを再現。CSS のみで JavaScript は不要です。
こんな場面に
- ナチュラル・キッズ・手仕事系ブランドの見出し
- 温かみを出したいキャッチコピーの強調
- カフェや雑貨など、親しみやすい世界観の LP
線の色と濃さは background の rgba 値、太さは height、傾きは rotate の角度で調整できます。線は z-index:-1 で文字の後ろに回しているので、可読性を保ったままハイライト風にも使えます。サンプルは読み込み後に自動で描かれますが、ホバーで発火させたい場合は :hover に切り替えてください。動きを抑える設定では prefers-reduced-motion で線を最初から表示するのが親切です。
使用例・適したシーン
- カード装飾
- 見出し下線
- ホバー強調
よくある質問
線の色や太さを変えられますか？
色と濃さは .paint-text::after の background にある rgba 値で調整します。透明度を上げ下げするとマーカーらしさが変わります。太さは height、手描きの歪みは四隅の border-radius と rotate の角度で表現を調整できます。
ホバーしたときに描かせることはできますか？
できます。サンプルは表示時に自動で描かれますが、アニメーションの指定を :hover 時に動くよう切り替えれば、カーソルを乗せた瞬間に線が引かれる演出になります。