CSS グラデーションを使用して下線の外観を制御するにはどうすればよいですか?

下線の外観を制御する方法

下線は、視覚的な魅力と読みやすさを高めるために調整できます。 text-decoration:underline の長さと位置を操作するには、グラデーションの使用を伴うシンプルかつ効果的なテクニックがあります:

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

位置調整:

• 線を移動するには、background-position プロパティを調整します。
• たとえば、background-position:bottom left;行をテキストの左側に揃えます。

長さの調整:

• 長さを制御するには、background-size プロパティを調整します。
• たとえば、background-size: 50% 1px;

追加のカスタマイズ:

• テキストに近い:padding-bottom: 0;線をテキストに近づけます。
• テキストから遠い:padding-bottom: 10px;線とテキストの間の距離が長くなります。
• 異なる色: 線の色をカスタマイズするには、background-image プロパティを変更します。例:background-image:linear-gradient(red 0 0) );.

以上がCSS グラデーションを使用して下線の外観を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。