在CSS中，我們可以通過(guò)text-decoration屬性來(lái)給文字添加下劃線，但是如何讓下劃線處于文字中間呢？

我們可以使用偽元素:before和:after來(lái)實(shí)現(xiàn)這個(gè)效果。具體方法如下：

p {
position: relative; /* 設(shè)置相對(duì)定位 */
text-decoration: none; /* 取消原有下劃線 */
}
p:before {
content: "";
position: absolute; /* 設(shè)置絕對(duì)定位 */
bottom: 50%; /* 將下劃線移動(dòng)至文字中間 */
left: 0;
right: 0;
border-bottom: 1px solid #000; /* 設(shè)置下劃線樣式 */
}

上述代碼中，我們先將p元素的定位設(shè)置為相對(duì)定位，取消原有下劃線。接著使用:before偽元素創(chuàng)建一個(gè)空的框架，在這個(gè)框架中我們?cè)O(shè)置絕對(duì)定位、bottom為50%來(lái)讓它移動(dòng)到文字中間位置，left和right均為0，這樣就可以覆蓋整個(gè)p元素。最后設(shè)置border-bottom樣式即可。

通過(guò)這個(gè)方法，我們可以在不使用圖片的情況下實(shí)現(xiàn)下劃線處于文字中間的效果。