在網頁設計中，我們經常需要對文字進行加粗、斜體、下劃線等操作，其中下劃線是一個常見的需求。但是，有時我們又希望同時顯示上下劃線，這種情況下該如何實現呢？ 在 CSS 中，我們可以使用 text-decoration 屬性對文字進行下劃線、刪除線等樣式的設置。對于同時顯示上下劃線的需求，我們可以通過添加偽元素 ::before 和 ::after 來實現。 下面是示例代碼：

p {
position: relative;
}
p::before, p::after {
content: '';
position: absolute;
width: 100%;
left: 0;
border-bottom: 1px solid black;
}
p::before {
top: 50%;
transform: translateY(-50%);
}
p::after {
bottom: 50%;
transform: translateY(50%);
}

在代碼中，我們首先給 p 標簽設置了 position: relative 屬性，這是因為我們后面要使用絕對定位來實現偽元素的添加。 接著，我們分別添加了 ::before 和 ::after 偽元素，在這兩個偽元素中都設置了 content: ''，即空內容。然后設置了這兩個偽元素的寬度為 100%，left 為 0，這表示它們會沿著文本塊的左邊緣進行定位。 對于 p::before，我們將其定位到文本塊的中間位置，并使用 transform: translateY(-50%); 將其往上移動了一半的高度，從而讓其與文本的下劃線重合。 而對于 p::after，則是將其定位到文本塊的底部，并使用 transform: translateY(50%); 將其往下移動了一半的高度，從而讓其與文本的上劃線重合。 添加了這兩個偽元素之后，文本塊中的文字就能同時顯示上下劃線了。 需要注意的是，這種方法需要對偽元素進行絕對定位，所以如果文本塊的高度發生了變化，可能需要額外的調整來保證上下劃線的位置正確。