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

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

在以上代碼中，我們首先為需要添加上劃線的文字添加樣式，包括取消默認下劃線、將元素轉為塊級元素和設置相對定位等。然后，我們使用偽元素after來創建一個上劃線，讓其絕對定位在文字的底部。最后，我們在鼠標懸停時將上劃線的顏色變為紅色。

通過以上簡單的CSS代碼，我們就可以實現在網頁中添加上劃線的效果了。