Skip to main content
Categories
基礎的な学習学習

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

  • Post Author
    By pitang1965
  • Post Date
    Wed Apr 03 2019

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