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

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

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

使用這種方法，可以動(dòng)態(tài)地操縱偽元素的屬性，實(shí)現(xiàn)不同大小、顏色的圓形。同樣的，也可以使用::after偽元素來畫其它形狀。這是 CSS 的一項(xiàng)強(qiáng)大功能，可以幫助我們創(chuàng)建更加細(xì)膩和高效的頁(yè)面效果。