css3 伪元素 icon

CSS3 伪元素 icon是指通过CSS3 ::before或::after伪元素来添加图标，即在HTML中不需要添加图标字体或图片资源，而是通过CSS样式来实现。这种方式可以大大减少资源的加载，提高页面的性能。

下面是一个::before伪元素添加icon的示例：

//HTML代码
<div class="icon" title="搜索"></div>

//CSS代码
.icon::before{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(search.png) no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}

上面代码中，我们先创建了一个空元素<div>，并设置了title属性为“搜索”。然后通过::before伪元素，设置了content为空，表示该元素是一个空元素。接着将其设为display: inline-block，以便在行内元素中显示；并设置了其width和height属性为16px，对应于icon的大小。然后设置background为search.png，即将该伪元素作为背景图像，表示这个伪元素是一个icon。最后，通过vertical-align和margin-right属性，将icon与文本对齐并添加一些间距。

我们也可以使用矢量图形作为icon，以保证在不同分辨率下的清晰度。如下所示：

//HTML代码
<div class="icon" title="关闭"></div>

//CSS代码
.icon::before{
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(close.svg) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right: 5px;
}

上面代码中，我们仍然使用::before伪元素，并将其作为背景图像来显示icon。但这里使用的是SVG格式的矢量图像，使用background-size: contain来缩放该图像以适应icon大小。

通过使用CSS3 伪元素 icon，我们可以更加灵活地添加icon，并避免了大量的资源加载，从而在很大程度上提高了页面的性能。