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

2021-04-19

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;
}