CSS3中的:after偽元素是CSS中的重要一環，它可以為一個元素添加額外的內容。這個額外的內容是放在被選元素的內容之后的。

.box:after {
content: " ";
display: block;
height: 10px;
width: 10px;
background-color: red;
}

在上面的例子中，.box元素會在其內容后面插入一個寬高為10像素的紅色塊。使用content屬性可以指定插入的內容，display可以將偽元素變成塊級元素，使其可以像普通元素一樣具有寬高屬性，這樣我們就可以在其中加入一些數據來實現我們的需求。

另外一種用法是可以通過偽元素來為一個已經存在的元素添加圖標，而不需要對HTML代碼進行更改：

.icon:before {
content: url("image.jpg");
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}

在上面的例子中，我們給.icon元素添加了一個前綴圖標。圖標可以通過content屬性中使用url()來引用一個外部資源，可以是圖片、字體或其它類型的文件。使用偽元素，我們可以進一步定制化某個元素的呈現方式，讓你的頁面更加的美觀。