后台页面-制作铃铛带数字消息提示样式

效果样式图

代码:

<li class="display">
     <a href="@Url.Action("Index","Contract",new { })" data-toggle="tooltip" data-placement="top" title="消息提示">
           <span class="glyphicon glyphicon-bell" aria-hidden="true" style="font-size:25px;position:relative;"></span>
                 <span style="font-size:11px;position:absolute;left:33px;top:10px;border-radius: 50%;height: 20px;width: 20px;display: inline-block;background: #f20c55;vertical-align: top;">
                 <span style="display: block;color: #FFFFFF;height: 20px;line-height: 20px;text-align: center"> 12</span>
            </span>
     </a>
</li>