在网页设计中，添加一些小效果可以使页面更加生动有趣，其中下划线圆形是一种受欢迎的效果之一。下面我们来学习如何使用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代码可以让你更加轻松地实现下划线圆形效果，与传统的下划线不同，只有当鼠标悬停时才会出现下划线圆形，更加灵活优美。