如何控制下劃線的外觀

可以自訂底線以增強視覺吸引力和可讀性。要操縱文字裝飾的長度和位置：下劃線，有一種簡單而有效的技術，涉及使用漸變：

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center;
  background-size: 80% 2px;
  background-repeat: no-repeat;
  padding-bottom: 4px;
}

位置調整：

• 要移動線條，請調整background-position屬性。
• 例如background-position：左下角；將線條與文字左側對齊。

長度調整：

• 要控制長度，請調整背景大小屬性。
• 例如background-size: 50% 1px;建立較短的線條。

其他自訂：

• 靠近文字： padding-bottom: 0;讓線條更靠近文字。
• 遠離文本： padding-bottom: 10px;增加線條與文字之間的距離。
• 不同顏色：透過修改background-image屬性自訂線條顏色，例如background-image: Linear-gradient(red 0 0 );.