在CSS中,我们经常需要在图片的背景上显示标记,比如一些红色的角标。这个过程需要使用:before
或:after
伪元素来实现。
.element { position: relative; } .element:before { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 20px; background: url("icon.png") no-repeat; } .element:after { content: "NEW"; position: absolute; top: 5px; right: -5px; font-size: 10px; color: white; background: red; border-radius: 50%; width: 20px; height: 20px; text-align: center; line-height: 20px; }
上面的代码将在元素的右上角添加一个背景图像和一个红色圆形角标,来标识该元素是“NEW”。
通过调整:before
和:after
伪元素的样式属性,您可以自定义角标颜色、大小、位置和图像。这是一种非常方便的技巧,可以让您轻松地为您想添加标记的任何元素添加角标。