如何在菜单上显示徽章

Question

我在一些网站上看到他们有一个菜单，他们是一个小徽章，显示菜单上的数字。有人知道如何显示。我正在使用mvc和razor语法开发Web应用程序。现在例如我有一个菜单“电子邮件”，如果收到任何新的电子邮件，那么菜单项应显示“电子邮件1”。这里“1”应位于电子邮件菜单的右上角。我很想知道是否有人这样做了并且可以就此分享一些想法。

Answer 1

我个人使用HTML元素的data属性，然后使用content:attr(data)生成一个仅限CSS的徽章，如下所示：

这是一个例子：

.badged::after{
    content:attr(data-count); /* Important part */

    position:relative;    
    top:-10px;
    right:0px;

    display:inline-block;
    min-width:16px;
    height:16px;

    text-align:center;
    color: white;
    
    border:1px solid darkred;
    border-radius:10px;
    background: red;
}

<span class="badged" data-count="1">I'm badged!</span>

Answer 2

你的意思是这样的：

但是：Kua zxsw指出

http://jsfiddle.net/87FE9/1/

它基本上是一个具有巨大边框半径但宽度和高度较小的div，它使它看起来像一个圆圈，它绝对定位，在我的情况下，但通常是参考父元素，并通过javascript显示或隐藏。