パーツ番号 07-05-12 ・ CSSのみ

見出し用ツートンアンダーライン

濃色の短い線と淡色の長い線を並べた見出し用の下線装飾です。WordPressの記事内小見出しの下に添えてセクションの区切りを明確にできます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-12-block">
          <h4 class="d07-05-12-h">見出しサンプル</h4>
          <div class="d07-05-12-underline">
            <span class="d07-05-12-bar d07-05-12-bar1"></span><span class="d07-05-12-bar d07-05-12-bar2"></span>
          </div>
        </div>

CSS

.d07-05-12-block{ text-align:left; }
        .d07-05-12-h{ margin:0 0 8px; font-size:16px; font-weight:700; color:#222; }
        .d07-05-12-underline{ display:flex; height:3px; width:120px; }
        .d07-05-12-bar1{ flex:0 0 40px; background:#333; }
        .d07-05-12-bar2{ flex:1; background:#ccc; }

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