CSS伪类可以帮助我们在不使用JavaScript的情况下，对HTML元素进行各种样式的控制。其中，常用的伪类之一就是:before和:after伪类。这两个伪类可以在元素的前面或后面添加内容，而且这些内容可以是文字、背景、边框等等，可以说是非常灵活的。

下面使用一个实例来演示如何使用:before和:after伪类添加图标。

/* HTML代码如下 */
<div class="icon-wrapper">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
/* CSS代码如下 */
.icon-wrapper a:before {
display: inline-block;
content: "";
background-image: url("path/to/icon.png");
background-repeat: no-repeat;
width: 20px;
height: 20px;
margin-right: 10px;
}
.icon-wrapper a:first-child:before {
background-position: 0 0;
}
.icon-wrapper a:nth-child(2):before {
background-position: -20px 0;
}
.icon-wrapper a:nth-child(3):before {
background-position: -40px 0;
}
.icon-wrapper a:last-child:before {
background-position: -60px 0;
}

上述代码中，我们在.icon-wrapper下的所有a标签前面添加了图标。其中，使用了:before伪类来实现。首先，我们设置了content属性为空字符串，然后将图标的路径设置为background-image，通过background-repeat控制不重复，设置图标的宽高，以及给各个图标之间设置了一个10px的间距。最后，通过:nth-child伪类控制不同图标的background-position，从而在每个a标签前添加不同的图标。

通过这种方式，我们可以非常方便的在HTML元素中添加各种图标和样式，而不需要使用任何JavaScript代码，这不仅能提高代码的可维护性，也能保证网页的加载速度。