アイコン右上の未読数バッジと、NEW・SALEなどのラベルバッジ。数はaria-labelで伝え、2桁でも崩れないmin-width設計にします。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
未読数のドットは position: absolute でアイコンの右上角に重ねます。幅を固定せず min-width + padding にしておくと、1桁では真円、2桁以上ではカプセル形に自然に伸びます。見た目の数字は aria-hidden にし、実際の情報はボタンの aria-label（「未読3件」）で伝えるのがアクセシビリティの要点です。
未読数が変動する場合はJSでaria-labelも同時に更新します。99を超えたら「99+」に丸めるのが定番です。
通知ベルの未読数バッジとNEW/SALEのラベルバッジを作ってください。未読数はposition: absoluteで右上に重ね、min-widthで2桁対応、数の情報はボタンのaria-labelで伝えてください。