CSS3的aftert偽元素非常適合用來創(chuàng)建各種圖標(biāo)效果，無需額外添加HTML標(biāo)簽，只需要簡單的CSS代碼就可以實(shí)現(xiàn)。

.icon {
display: inline-block;
width: 20px;
height: 20px;
position: relative;
}
.icon:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon-heart:after {
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
}
.icon-star:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid gold;
transform: rotate(45deg);
}

上面的代碼中，.icon是所有圖標(biāo)的基礎(chǔ)樣式，使用了相對(duì)定位(position: relative)和偽元素:after。通過設(shè)置偽元素的樣式，實(shí)現(xiàn)不同的圖標(biāo)效果。

例如，使用.icon-heart樣式可以創(chuàng)建一個(gè)紅色的心形小圖標(biāo)，而使用.icon-star樣式可以創(chuàng)建一個(gè)金色的星星小圖標(biāo)。

在實(shí)際開發(fā)中，我們可以根據(jù)需要自定義各種不同的圖標(biāo)效果，非常方便實(shí)用。