CSS的:before偽元素是CSS畫圖的一個強大工具。它能夠在元素的內容之前插入一些內容，這個插入的內容可以是文字，也可以是圖片。

通過:before我們可以實現很多有趣的效果。比如說，我們可以通過:before畫出簡單的圖形和圖標。

.icon:before{
content: '';
display: inline-block;
width: 20px;
height: 20px;
background: url('path/to/image.png') no-repeat;
}

上面的代碼中，我們給一個類名為.icon的元素添加了:before偽元素。利用content屬性設為空字符串，使其生成一個空的元素；同時將其設為內聯塊級元素，并定義寬高為20px；最后設置背景圖片為我們想要的圖標。這樣就完成了一個簡單的圖標的繪制。

我們也可以通過:before畫出一些簡單的圖形。比如，我們利用border屬性和border-radius屬性，可以畫出簡單的圓形。

.circle:before{
content: '';
display: block;
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid black;
}

上面的代碼中，我們給一個類名為.circle的元素添加了:before偽元素。利用content屬性設為空字符串，使其生成一個空的元素；同時將其設為塊級元素，并定義寬高為50px；利用border-radius屬性設為50%，畫出一個圓形；最后使用border屬性，為圓形添加一個簡單的黑色邊框。這樣就完成了一個簡單的圓形的繪制。