CSS中如何調整底線的長度和位置？

在CSS 中調整下劃線長度和位置

為文字元素添加下劃線可能是一項簡單的任務，但自訂下劃線的長度和位置可以具有挑戰性。以下是如何實現對底線樣式的精確控制：

長度和高度控制：

要確定底線的長度，請使用 background-size 屬性。指定底線的寬度和高度，例如background-size: 80% 2px;。增加百分比值會加長下劃線，而調整高度值則控制線條粗細。

位置調整：

background-position 屬性可讓您調整底線的位置。下劃線相對於文字的垂直位置。若要將線條移近文本，請減小 padding-bottom 值；要將其移得更遠，請增加填充。

自訂範例：

以下範例示範如何修改底線長度、高度和位置：

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

透過結合這些技術，您可以建立自訂下劃線，從而增強文字的視覺吸引力和可讀性。

以上是CSS中如何調整底線的長度和位置？的詳細內容。更多資訊請關注PHP中文網其他相關文章！