CSS伪元素实现label右上角数字圆形标 - 代码示例与详解

使用CSS的伪元素::after来实现在label右上角显示一个数字圆形的效果，通过设置content属性来显示数字，通过设置background-color属性来设置背景颜色。\n\n首先，给label添加一个自定义属性data-count来控制数字的值，然后在CSS中定义如下样式：\n\ncss\nlabel {\n position: relative;\n}\n\nlabel::after {\n content: attr(data-count);\n position: absolute;\n top: -10px;\n right: -10px;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background-color: gray;\n color: white;\n font-size: 12px;\n}\n\n\n然后，在HTML中使用label标签，并设置data-count属性来控制数字的值：\n\nhtml\n<label data-count="5">示例</label>\n\n\n这样就可以在label标签的右上角显示一个灰色的圆形标，数字的值由data-count属性控制。