如何使用CSS添加下劃線

下劃線在閱讀和設計中是一個重要的元素， 下面我們將介紹如何使用 CSS 為文本添加下劃線。

使用text-decoration屬性

p {
text-decoration: underline;
}

這將對所有段落添加下劃線。

添加顏色和樣式

您也可以為下劃線使用其他顏色和樣式：

p {
text-decoration: underline;
text-decoration-color: red; //添加顏色
text-decoration-style: dotted; //添加樣式
}

下劃線樣式有以下幾種：

• solid：實線
• dotted：點線
• double：雙線
• wavy：波浪線

顏色可以使用關鍵字、十六進制值或 RGB 值指定。下面是其中一些示例：

p {
text-decoration: underline;
text-decoration-color: red;
}
p.wavy {
text-decoration: underline wavy blue;
}
p.dotted {
text-decoration: underline dotted #333;
}

使用偽元素添加下劃線

您還可以使用偽元素為文本添加下劃線：

p::after {
content: ""; // 偽元素必需加上 content 屬性
display: block;
width: 100%;
border-bottom: 2px solid #ddd;
margin-top: 5px;
}

這將在每個段落下添加一條下劃線。您可以根據需要調整顏色、樣式和間距。