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

二重ずれ下線見出し

色違いの下線2本がタイミングをずらしながら左から伸び、微妙にずれて重なる見出し。企業サイトの実績紹介や会社概要ページの中見出しに厚みを出せます。

css

プレビュー

ソースコード

HTML

<h4 class="d02-01-13-h io-reveal">積み重ねた信頼と実績</h4>

CSS

.d02-01-13 .d02-01-13-h{
          position:relative;
          font-size:26px;
          font-weight:700;
          color:#1a2333;
          padding-bottom:16px;
          letter-spacing:.05em;
        }
        .d02-01-13 .d02-01-13-h::before,
        .d02-01-13 .d02-01-13-h::after{
          content:"";
          position:absolute;
          left:0;
          width:100%; height:4px;
          border-radius:2px;
          transform:scaleX(0);
          transform-origin:left center;
        }
        .d02-01-13 .d02-01-13-h::before{
          bottom:10px;
          background:#f472b6;
          transition:transform .9s cubic-bezier(.22,1,.36,1) .15s;
        }
        .d02-01-13 .d02-01-13-h::after{
          bottom:2px;
          background:#2563eb;
          transition:transform .9s cubic-bezier(.22,1,.36,1) .4s;
        }
        .d02-01-13 .d02-01-13-h.is-in::before,
        .d02-01-13 .d02-01-13-h.is-in::after{
          transform:scaleX(1);
        }

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