CSSで通知のバッジを付ける方法

CSSで次のような緑色のバッジを付ける方法について考えてみました。

通知のバッジ
「メッセージ」についたバッジ

結果

HTML

<div class="top-menu">
<ul>
/* (略) */
<li><a class="notification-badge" href="#">メッセージ</a></li>
<li><a href="#">ヘルプ</a></li>
/* (略) */
</ul>
</div>

CSS

 .top-menu .notification-badge::after {
content: "●";
font-family: 'Courier New', Courier, monospace;
color: #008489;
position: relative;
top: -10px;
right: -0px;
font-size: 4px;
text-shadow: 0px 0px 2px #008489;
}

他に試した事


https://www.cssportal.com/blog/create-css-notification-badge/  より

このような数字付きの通知バッジのやり方は上記URLに記載されていました。

しかし、数字なしの場合に、content: noneや、content: “”では緑色の丸が表示されず、かといって、content: “abc”などとやると、楕円になってしまいました。