在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中文網其他相關文章！
