パーツ番号 02-07-27 ・ CSSのみ

両矢印区切り見出し

見出しテキストの両脇に矢印記号を配して区切りを示すスタイル。ページ送りやセクション番号の表示に使える。

staticcss

プレビュー

ソースコード

HTML

<h4 class="ttl"><span class="arrow">&#8592;</span>Section 02<span class="arrow">&#8594;</span></h4>

CSS

.d02-07-27 .ttl{ all:unset; display:flex; align-items:center; justify-content:center; gap:14px; font-size:20px; font-weight:800; color:#1f2937; letter-spacing:.05em; }
        .d02-07-27 .arrow{ color:#9ca3af; font-weight:400; font-size:18px; }

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