[分享]css3成功图标

CSS3成功图标是指通过CSS3技术实现的图标，具有美观、简洁、易用等特点，被广泛应用于网页设计以及移动应用。在CSS3中，我们可以通过 :before 和 :after 伪元素以及 content ...

CSS3成功图标是指通过CSS3技术实现的图标，具有美观、简洁、易用等特点，被广泛应用于网页设计以及移动应用。

在CSS3中，我们可以通过 :before 和 :after 伪元素以及 content 属性来实现这些图标。以下是一个简单的例子，展示了如何用CSS3实现一个成功图标：

.success-icon:before {
 content: ';
 display: inline-block;
 width: 10px;
 height: 10px;
 border: solid #FFFFFF;
 border-width: 0 2px 2px 0;
 transform: rotate(45deg);
 margin-right: 8px;
}

.success-icon {
 color: #FFFFFF;
 font-size: 16px;
 font-weight: bold;
} 

通过上面的代码，我们定义了一个名为 .success-icon 的类，其中 :before 伪元素用来画出成功图标的对勾，content 属性用来清除伪元素默认内容。同时，为了让图标垂直居中显示，我们定义了 margin-right。

在实际项目中，我们可以根据需求灵活修改图标的颜色、大小、旋转角度等样式。