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;
}

下線の位置を変更するには、background-position プロパティを調整します。例:

.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 中国語 Web サイトの他の関連記事を参照してください。