CSS是網(wǎng)頁設(shè)計中必不可少的一部分，其中上劃線也是常用的裝飾性元素之一。下面我們將介紹如何使用CSS來制作上劃線。

/* 為需要添加上劃線的文字添加樣式 */
.text {
text-decoration: none; /* 取消默認下劃線 */
display: inline-block; /* 將元素轉(zhuǎn)為塊級元素 */
position: relative; /* 設(shè)置相對定位 */
}
/* 添加偽元素after */
.text::after {
content: ''; /* 添加一個空白內(nèi)容 */
position: absolute; /* 設(shè)置絕對定位 */
bottom: 0; /* 與底部距離為0 */
left: 0; /* 與左側(cè)距離為0 */
height: 2px; /* 上劃線高度 */
width: 100%; /* 寬度100% */
background-color: black; /* 上劃線顏色 */
}
/* 鼠標(biāo)懸停時上劃線變成紅色 */
.text:hover::after {
background-color: red;
}

在以上代碼中，我們首先為需要添加上劃線的文字添加樣式，包括取消默認下劃線、將元素轉(zhuǎn)為塊級元素和設(shè)置相對定位等。然后，我們使用偽元素after來創(chuàng)建一個上劃線，讓其絕對定位在文字的底部。最后，我們在鼠標(biāo)懸停時將上劃線的顏色變?yōu)榧t色。

通過以上簡單的CSS代碼，我們就可以實現(xiàn)在網(wǎng)頁中添加上劃線的效果了。