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

虫食いラフ下線見出し

見出し下の線を不均等な長さの破片で構成し、虫食いのようなラフさを出すスタイル。フリーマーケットやDIY系サイトの見出しに合う。

staticcss

プレビュー

ソースコード

HTML

<div class="wrap">
          <h4 class="ttl">ラフ下線見出し</h4>
        </div>

CSS

.d02-10-33 .wrap{ text-align:center; }
        .d02-10-33 .ttl{ all:unset; position:relative; display:inline-block; font-size:22px; font-weight:800; color:#1f2937; padding-bottom:14px; }
        .d02-10-33 .ttl::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; background-image:linear-gradient(90deg,#1f2937 0 14px, transparent 14px 20px, #1f2937 20px 38px, transparent 38px 48px, #1f2937 48px 70px, transparent 70px 76px, #1f2937 76px 100px, transparent 100px 100%); }

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