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

スプリットカラー見出し

見出しを2色に塗り分け、中央に区切り線を挟むスタイル。比較コンテンツやビフォーアフター紹介の見出しに使える。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl"><span class="l">BEFORE</span><span class="divider"></span><span class="r">AFTER</span></h4>

CSS

.d02-10-10 .ttl{ all:unset; display:flex; align-items:center; justify-content:center; gap:12px; font-size:25px; font-weight:800; }
        .d02-10-10 .l{ color:#1f2937; }
        .d02-10-10 .r{ color:#0ea5e9; }
        .d02-10-10 .divider{ width:2px; height:26px; background:#d1d5db; }

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