在網頁設計中，添加一些小效果可以使頁面更加生動有趣，其中下劃線圓形是一種受歡迎的效果之一。下面我們來學習如何使用CSS實現下劃線圓形。

/* 給鏈接添加下劃線圓形效果 */
a {
position: relative;
color: #333;
text-decoration: none;
}
a::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #333;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
}
a:hover::after {
width: 100%;
}

在上述代碼中，我們通過給鏈接元素添加一個::after偽元素來實現下劃線圓形的效果。首先，我們通過設置偽元素的position屬性為relative，去除默認的下劃線。接著，我們設置偽元素的相關屬性，如大小、圓角和顏色等。通過設置bottom和left屬性讓圓形居中，transform屬性將圓形向左移動50%。當鼠標懸停在鏈接上時，將偽元素的寬度設置為100%，形成下劃線的效果。

上述的CSS代碼可以讓你更加輕松地實現下劃線圓形效果，與傳統的下劃線不同，只有當鼠標懸停時才會出現下劃線圓形，更加靈活優美。