css如何给图片加角标,如何实现图片的角标呢？

33333

#a1 {

width: 200px;

height: 200px;

background-color: #333;

color: #fff;

position: relative;

margin-top: 50px;

}

#a1:after {

content: attr(data-num);

line-height: 50px;

text-align: center;

width: 50px;

height: 50px;

border-radius: 50%;

background-color: red;

position: absolute;

top: -20px;

right: -20px;

}

$('#a1').click(function() {

var n = $("#a1").attr('data-num');

$("#a1").attr('data-num', ++n);

});

// $('#a1').click(function() {

// console.log($("#a1").data('num'));

// $("#a1").data('num', '3333');

// console.log($("#a1").data('num'));

// });

伪类做的，动态赋值也顺手写了