通知バッジ数字

<button class="d09-01-03-btn" type="button" aria-label="通知を増やす">
          <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="#334155" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
          <span class="d09-01-03-badge">3</span>
        </button>
        <p class="d09-01-03-hint">クリックで数字が増えます</p>

.d09-01-03{flex-direction:column;gap:14px}
        .d09-01-03-btn{position:relative;background:none;border:none;cursor:pointer;padding:6px}
        .d09-01-03-badge{position:absolute;top:0;right:0;min-width:20px;height:20px;padding:0 5px;background:#ef4444;color:#fff;font-size:12px;font-weight:700;border-radius:10px;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
        .d09-01-03-badge.d09-01-03-pop{animation:d09-01-03-pop .4s ease}
        @keyframes d09-01-03-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}}
        .d09-01-03-hint{font-size:12px;color:#94a3b8;margin:0}

(function(){
        var root=document.getElementById('item-09-01-03');if(!root)return;
        var btn=root.querySelector('.d09-01-03-btn'),badge=root.querySelector('.d09-01-03-badge'),n=3;
        btn.addEventListener('click',function(){
          n++;badge.textContent=n;
          badge.classList.remove('d09-01-03-pop');void badge.offsetWidth;badge.classList.add('d09-01-03-pop');
        });
      })();