先来样式图
效果如图显示
接下来奉上 html部分
<li data-num='10' id="a1"><a href="" onclick="change()"><img th:src="@{/img/message.jpg}" style="width: 30px;height: 30px"></a></li>
接下来css部分
#a1 {
color: #fff;
position: relative;
}
#a1:after {
content: attr(data-num);
line-height: 28px;
text-align: center;
border-radius: 50%;
width: 25px;
height: 25px;
background-color: red;
position: absolute;
top: 10px;
right: 0;
}
.Num {
content: attr(data-num);
text-align: center;
border-radius: 50%;
width: 20px;
height: 20px;
color: #080808;
background-color:#e5eaee;
margin-right: 20%;
margin-top: 2px;
position: absolute;
right: 0;
}
.pointer{
cursor:pointer;
}