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

スライド下線見出し

スクロールで表示された瞬間、下線が左からスッと伸びる定番演出。WordPressのセクション見出し（h2/h3）にそのまま使えます。

scrollcss

プレビュー

ソースコード

HTML

<h4 class="d02-01-01-h io-reveal">選ばれる理由があります</h4>

CSS

.d02-01-01 .d02-01-01-h{
          position:relative;
          font-size:26px;
          font-weight:700;
          color:#1a2333;
          padding-bottom:12px;
          letter-spacing:.05em;
        }
        .d02-01-01 .d02-01-01-h::after{
          content:"";
          position:absolute;
          left:0; bottom:0;
          width:100%; height:4px;
          background:linear-gradient(90deg,#2563eb,#06b6d4);
          border-radius:2px;
          transform:scaleX(0);
          transform-origin:left center;
          transition:transform .8s cubic-bezier(.22,1,.36,1) .2s;
        }
        .d02-01-01 .d02-01-01-h.is-in::after{
          transform:scaleX(1);
        }

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