パーツ番号 02-15-02 ・ CSSのみ

ペンでなぞる下線見出し

見出しの下にマーカーのような太い下線が左から右へ伸びていきます。WordPressのセクション見出しでキーワードを強調したいときに使えます。

css

プレビュー

ソースコード

HTML

<h4 class="d02-15-02-txt">シンプルな強調見出し<span class="d02-15-02-underline"></span></h4>

CSS

.d02-15-02{background:#fff}
        .d02-15-02-txt{position:relative;display:inline-block;margin:0;padding-bottom:10px;font-size:22px;font-weight:800;color:#111827}
        .d02-15-02-underline{position:absolute;left:0;bottom:0;height:6px;width:100%;background:#f97316;border-radius:3px;transform-origin:left;transform:scaleX(0)}
        .d02-15-02.is-in .d02-15-02-underline{animation:d1802grow 1s cubic-bezier(.65,0,.35,1) .3s forwards}
        @keyframes d1802grow{to{transform:scaleX(1)}}
        @media (prefers-reduced-motion: reduce){.d02-15-02-underline{animation:none!important;transform:scaleX(1)}}

クラス名 .d02-15-02 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。