CSS 偽類::before可以用來向元素中插入內容，而content屬性可以控制插入的內容。通過這個偽類和屬性，我們可以使用 CSS 畫圓，而不需要使用任何圖片文件。

/* 一個白色的, 直徑為30像素的圓 */
.circle {
position: relative; /* 給偽元素定位用 */
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;  /* 使元素呈現圓形 */
}
.circle::before {
content: '';   /* 必須添加內容 */
position: absolute; /* 絕對定位 */
top: 50%; /* 圖形的上沿位置到父元素上沿距離的比例 */
left: 50%; /* 圖形的左沿位置到父元素左沿距離的比例 */
transform: translate(-50%, -50%); /* 將圖形的中心點移到正中間 */
width: 20px;
height: 20px;
background-color: #000;
border-radius: 50%; /* 長寬相等，處理圓形 */
}

上述代碼使用了兩個元素，一個主元素.circle，一個由::before生成的子元素。主元素定義了圓的大小和背景顏色，而子元素通過絕對定位從父元素中心點開始畫了一個小圓。

使用這種方法，可以動態地操縱偽元素的屬性，實現不同大小、顏色的圓形。同樣的，也可以使用::after偽元素來畫其它形狀。這是 CSS 的一項強大功能，可以幫助我們創建更加細膩和高效的頁面效果。