用CSS伪类实现的方便角标

给某个链接(按钮)旁边加上角标，有新消息提示时加上红点或直接标出有多少条新消息。
以前是大费周章 JS去控制 DOM 。脚本非常的臃肿

今天想了想用 ATTR() 来实现，把想法丢给 AI 让AI帮我把 CSS 和 JS 给完善了一下

HTML 部分，是一个导航菜单，ID nav_order 的具有属性 data-notify 值为8。 同级的另一个元素nav_customer没有

<li class="dropdown">
    <a href="#" id="nav_order" data-notify="8">订单</a>
    <ul class="dropdown-menu">
        <li><a href="#" data-act="">待处理</a></li>
        <li><a href="#" data-act="">批量添加</a></li>
    </ul>
</li>
<li class="dropdown"><a href="#" id="nav_customer" data-act="">客户</a>
 ....

CSS部分，多余的元素有点多。简单概括几个要点 a 有个伪类，样式为右上角有角标。
重点是 content: attr(data-notify); 显示的是 data-notify 属性的值。
最后追加的是一个覆写的样式，当不具备 data-notify 属性时，让 content值为none 此时 :after 将不显示。

a {
    position: relative;
    display: block;
    line-height: 40px;
    padding: 0 20px;
    text-decoration: none;
}

a:after {
    position: absolute;
    top: 2px;
    left: calc(100% - 16px);
    content: attr(data-notify);
    background: #A22;
    color: #fff;
    font-size: 9px;
    height: 10px;
    line-height: 10px;
    padding: 3px 5px;
    border-radius: 8px;
    border: 1px #fCC solid;
}

a:not([data-notify]):after {
    content: none;
}

如此设定之后，JS控制角标就非常优雅了，只需要管理一个data-notify属性。
以 jQuery为例

//改变角标的内容
$("#nav_order").attr("data-notify", '99'); //把8变为99

//去掉角标
$("#nav_order").removeAttr("data-notify");

//增加角标
$("#nav_customer").attr("data-notify", '3');

效果如图。

艾玛AI真香