CSS是一種用于網頁設計的樣式語言，它可以讓我們更輕松地設計網頁，其中之一就是畫網頁圖標。本文將介紹如何使用CSS的偽元素來繪制網頁圖標。

.icon {
display: inline-block;
width: 50px;
height: 50px;
position: relative;
margin-right: 10px;
}
.icon::before,
.icon::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.icon::before {
left: 0;
width: 25px;
height: 5px;
background-color: #000;
}
.icon::after {
right: 0;
width: 5px;
height: 25px;
background-color: #000;
}

上述代碼中，我們通過給.icon元素設置display為inline-block來使它成為塊級元素，接著我們給它設置寬度為50px，高度為50px，并且設置其位置為相對定位。我們使用偽元素::before和::after來分別繪制圖標的兩個部分。

偽元素是不存在于文檔中的元素，但是它們可以用CSS樣式來渲染。我們首先使用position:absolute來使::before和::after元素相對于.icon定位，接著用transform:translateY(-50%)將它們豎直居中。最后，我們為::before和::after分別設置寬度、高度和背景顏色，從而形成了一個簡單的網頁圖標。

總之，使用CSS繪制網頁圖標是一種簡單有效的方法，可以讓我們在設計網頁時更加自由和靈活。讓我們發揮創意，用CSS畫出更多獨特的網頁圖標吧！