实现如下的消息提醒

第一种方式

很简单在标签(i)后面，在添加一个元素并通过定位元素，来达到实现效果。但是其实之前看过张鑫旭的一篇文章，content内容一直没有具体的应用。这次就想通过content来实现

content实现

首先其实这个消息主要有2个部分

外形-圆型和背景颜色
内容-消息个数

给i标签添加before伪类来实现样式，设置before中的content值就能实现如图效果

i:before{
    content: '2';
    display: block;
    position: absolute;
    right: -.5rem;
    top: -.5rem;
    font-style: normal;
    height: 1rem;
    width: 1rem;
    line-height: 1rem;
    border: .1rem solid #fff;
    border-radius: 50%;
    background: #f60;
    color: #fff;
    font-size: .6rem;
}