html图片右上角加上角标

先来样式图
效果如图显示
接下来奉上 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;
	}