css伪类给图片加角标 |完整的前端项目css文件

/* HTML结构 */
<img src="image.jpg" alt="图片">
/* CSS样式 */
img:hover::after {
content: "新品";
position: absolute;
top: 10px;
left: 10px;
background-color: #ff0000;
color: #fff;
padding: 5px;
border-radius: 5px;
font-size: 14px;
}

上面的代码中，大家使用了:hover伪类以及::after伪元素来实现给图片添加角标的效果。在鼠标悬停在图片上时，角标会跟随鼠标一起移动。

另外，大家通过设置position属性来控制角标的位置，background-color属性来设置角标的背景颜色，padding属性来设置角标的内边距，border-radius属性来设置角标的圆角半径，font-size属性来设置角标文本的字体大小。

在实际应用中，可以根据具体的需要调整样式属性，以达到更好的效果。通过使用CSS伪类，给图片加上角标可以让大家更直观地了解到CSS的强大，同时也能够提升网页的用户体验。