CSS グラデーションを使用してテキストの下線の長さと位置をカスタマイズするにはどうすればよいですか?

テキストの下線の長さと位置のカスタマイズ

カスタマイズ可能なテキストの下線を実現するには、CSS グラデーションが多用途のソリューションを提供します。背景サイズ、背景位置、パディングなどのパラメータを調整することで、下線の長さと位置の両方を簡単に調整できます。

長さの調整:

コントロール下線の長さは background-size プロパティによって決まります。パーセンテージまたは固定ピクセル値 (例: 80% 2px) を指定して線の長さを拡大縮小します。

位置の変更:

背景を使用して下線の位置を操作します。 -位置。水平座標と垂直座標を変更することで、テキストを基準にして線の位置を変更できます (例: 中央の位置の場合は下中央)。

例:

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

追加のカスタマイズ:

長さと位置に加えて、他のさまざまなプロパティで下線を強化できます:

• 小さい -長さを大幅に短くします
• left - 線を左端に揃えます
• center-close - 線をテキストの近くの中央に配置します
• right - 線を右端に揃えます
• close - 線をテキストの近くに移動します
• big - 長さと太さを大きくします
• far - 線と文字の間に隙間を追加します

以上がCSS グラデーションを使用してテキストの下線の長さと位置をカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。