パーツ番号 02-10-14 ・ CSSのみ

テーパー下線見出し

左端が太く右に向かって細くなるくさび形の下線を敷いたスタイル。特集記事やコラムの導入見出しに動きのある印象を与える。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">テーパー下線見出し</h4>
        </div>

CSS

.d02-10-14 .wrap{ text-align:center; }
        .d02-10-14 .ttl{ all:unset; position:relative; display:inline-block; font-size:23px; font-weight:800; color:#1f2937; padding-bottom:18px; }
        .d02-10-14 .ttl::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:10px; background:#f97316; clip-path:polygon(0 0, 100% 40%, 100% 60%, 0 100%); }

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