CSS圖標(biāo)下劃線是一個很有用的效果，可以使頁面中的文本更加突出，更易于閱讀。通過下面的代碼和解釋，你可以輕松地實現(xiàn)圖標(biāo)下劃線效果。

.text-with-icon {
display: inline-block;
position: relative;
padding-bottom: 5px;
}
.text-with-icon::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 25px;
height: 2px;
background-color: #000;
}

首先，我們給帶有圖標(biāo)下劃線效果的文本添加一個類名“text-with-icon”。這個類名需要設(shè)置為“inline-block”，這樣我們才能在文本中添加圖標(biāo)，并讓圖標(biāo)位于文本的下方。

接下來，我們使用了一個CSS偽元素“::after”，用來添加下劃線。通過設(shè)置“content: ""”，我們讓這個偽元素為空白。然后，我們設(shè)置它的位置為“absolute”，讓它位于文本的下方。我們將它相對于父元素居中，使用“l(fā)eft: 50%;”和“transform: translateX(-50%);”。

在這里，我們設(shè)置了下劃線的寬度和高度，用來控制它的大小。最后，我們將下劃線的背景顏色設(shè)置為黑色。

現(xiàn)在，你只需要將這些代碼添加到你的CSS文件中，并將類名“text-with-icon”添加到你需要添加圖標(biāo)下劃線效果的文本中即可。

使用CSS圖標(biāo)下劃線，可以為頁面中的文本添加一個簡單而強大的效果，使它們更加突出和易于閱讀。