パーツ番号 02-17-12 ・ CSSのみ

ホバーウェイトシフト見出しセット

set全体をホバーすると、h2から順に左罫線が0から本来の太さへ時間差で膨らんでいく。太さの重みが階層を下るように連鎖するので、製品ページのこだわり紹介ブロックに手ざわりを添える。

hovercss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">品質へのこだわり</p>
          <p class="lv3">原材料の選定</p>
          <p class="lv4">産地について</p>
        </div>

CSS

.d02-17-12 .set{ width:100%; display:flex; flex-direction:column; gap:16px; }
        .d02-17-12 .lv2,.d02-17-12 .lv3,.d02-17-12 .lv4{ margin:0; border-left:0 solid #059669; padding-left:0; transition:border-left-width .5s cubic-bezier(.22,1,.36,1), padding-left .5s cubic-bezier(.22,1,.36,1); }
        .d02-17-12 .lv2{ font-size:23px; font-weight:800; color:#065f46; }
        .d02-17-12 .lv3{ font-size:18px; font-weight:700; color:#047857; border-left-color:#34d399; }
        .d02-17-12 .lv4{ font-size:14px; font-weight:700; color:#4b5563; border-left-color:#a7f3d0; }
        .d02-17-12 .set:hover .lv2{ border-left-width:6px; padding-left:13px; }
        .d02-17-12 .set:hover .lv3{ border-left-width:4px; padding-left:13px; transition-delay:.12s; }
        .d02-17-12 .set:hover .lv4{ border-left-width:2px; padding-left:13px; transition-delay:.24s; }

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