如何使用 CSS 漸層自訂底線長度和位置？

設定底線樣式：控制長度和位置

下劃線通常用於強調文字。然而，它們往往局限於固定的長度和位置，從而限制了客製化。本指南探討如何使用 CSS 漸層來變更底線的長度和位置。

使用漸變

漸變提供了一種靈活的方式來操作下劃線。透過使用背景漸變，您可以調整下劃線部分的大小和位置。

.underline {
  background-image: linear-gradient(#5fca66 0 0);
  background-position: bottom center; /* Adjust position */
  background-size: 80% 2px; /* Control length and height */
  background-repeat: no-repeat;
  padding-bottom: 4px; /* Can also affect position */
}

調整長度和位置

透過修改背景大小屬性，可以控制底線的長度和高度。例如：

.small {
  background-size: 50% 1px;
}

.big {
  background-size: 100% 3px;
}

要重新定位底線，請調整背景位置屬性。例如：

.left {
  background-position: bottom left;
}

.center-close {
  background-position: bottom 5px center;
}

.right {
  background-position: bottom right;
}

其他控制項

padding-bottom 屬性也可以用於微調下劃線的位置，特別是在結合使用時具有背景位置屬性。

.close {
  padding-bottom: 0;
  background-position: bottom 5px center;
}

.far {
  padding-bottom: 10px;
}

範例

<span class="underline">This is a sentence</span>. I would like <span class="underline close">some words to have</span> longer <span class="underline left">underlines</span> than others. I would <span class="underline big center-close">also like</span> to be able to change the <span class="underline small right">position</span> of the <span class="underline big">underline</span>(to
<span class="underline far">be centered under the word, for example</span>).

此範例示範了 CSS 漸層可以實現的各種長度和位置調整。

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