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

上付き注釈風のミニラベル

本文中に小さく上付き表示する注釈マーク。価格表や規約文の補足説明を本文を邪魔せずに示せる。

staticcss

プレビュー

ソースコード

HTML

<p class="body">価格は全て税込表示です<span class="note">※1</span>となります。詳細は店舗にてご確認ください。</p>
        <p class="footnote"><span class="note">※1</span> 一部商品は軽減税率の対象外です。</p>

CSS

.d02-14-05{ display:flex; flex-direction:column; justify-content:center; gap:14px; }
        .d02-14-05 .body{ all:unset; display:block; font-size:14px; color:#1f2937; line-height:1.7; }
        .d02-14-05 .note{ font-size:10px; font-weight:700; color:#dc2626; vertical-align:super; margin:0 1px; }
        .d02-14-05 .footnote{ all:unset; display:block; font-size:11px; color:#9ca3af; line-height:1.6; border-top:1px dashed #e5e7eb; padding-top:10px; }

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