如何实现图片的角标呢？

Question

怎么实现这种图片的角标呢？要能动态改变角标的值。。。

Answer 1

<div data-num='22' id="a1">33333</div>

            #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'));
                //                });

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

Answer 2

看你项目需要支持到ie多少
考虑低级别ie的话，建议增加一个<em></em> 通过定位啥的，固定到右上角

如果不需要，建议使用::after ::before等伪元素，还能使用border-radius实现圆角

移动端的话，直接伪元素吧

Answer 3

就加一个结构上去嘛~css3 可以使用:after

Answer 4

如楼上几位所说，使用::after ::before伪元素可以的。当然了不使用伪元素也可以比如设置定位，例如我们所用的segmentfault网站通知一样