バッジアイコンを表示

サンプル

いきなりですが、サンプルです。
シンプルなデザインで2種作りました。

See the Pen Untitled by masayasu_t (@cjlsrdxi-the-builder) on CodePen.

ポイント

バッジに数値を表示させる際にhtmlのdata属性を使用しました。

htmlにdata属性を用意します。

html

<div id="mailNumberBadge" class="mail-icon badge number-badge" data-badge_number=""></div>

cssのcontentでdata属性を参照します。

css

.number-badge::after{
  content: attr(data-badge_number);
}

javascriptでdata属性に値をセットします。

javascript

document.getElementById('mailNumberBadge').dataset.badge_number = 10;

2024/10/11 追記

バッジ要素に「float: right;」を追加して、バッジを付ける要素のサイズによらず、右上に表示するようにしました。