HTML 設置下劃線長度

在 HTML 中，下劃線是通過添加文本裝飾來實現的。默認情況下，下劃線的長度是自適應的，取決于文本的寬度。

但有時我們需要控制下劃線的長度，這可以通過 CSS 樣式來實現。

設置下劃線長度的CSS屬性

在 CSS 中，下劃線是通過text-decoration屬性來設置的。默認情況下，下劃線的長度是自適應的，取決于文本的寬度。例如：

p {
text-decoration: underline;
}

通過添加text-decoration屬性的值為underline，可以為文本添加下劃線。

如果我們需要控制下劃線的長度，可以使用text-decoration屬性的underline-style子屬性。

可以使用以下值來設置下劃線的長度：

• solid：實線
• double：雙線
• dotted：點狀線
• dashed：虛線
• wavy：波浪線
• none：無下劃線

例如，如果我們需要一個寬度為 4 個像素的實線下劃線：

p {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-width: 4px;
}

通過添加text-decoration-style子屬性的值為solid，可以設置下劃線為實線。然后，通過添加text-decoration-width子屬性的值為4px，可以設置下劃線的寬度為 4 個像素。

其他類型的下劃線也可以使用同樣的方式進行設置。