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

下線は、視覚的な魅力と読みやすさを高めるために調整できます。 text-decoration:underline の長さと位置を操作するには、gradients:

.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:左下。行をテキストの左側に揃えます。

長さの調整:

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

追加のカスタマイズ:

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