CSS で下線の長さと位置を調整するにはどうすればよいですか?

CSS での下線の長さと位置の調整

テキスト要素に下線を引くのは簡単な作業ですが、下線の長さと位置をカスタマイズすることは可能です。挑戦的であること。下線のスタイルを正確に制御する方法は次のとおりです。

長さと高さの制御:

下線の長さを決定するには、background-size プロパティを使用します。下線の幅と高さを指定します（例：background-size: 80% 2px;）。パーセント値を増やすと下線が長くなり、高さの値を調整すると線の太さが制御されます。

位置調整:

background-position プロパティを使用すると、背景の位置を調整できます。テキストに対する下線の垂直位置。行をテキストに近づけるには、padding-bottom の値を減らします。さらに遠くに移動するには、パディングを増やします。

カスタマイズの例:

下線の長さ、高さ、位置を変更する方法を示す例は次のとおりです:

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

これらのテクニックを組み込むことで、テキストの視覚的な魅力と読みやすさを向上させるカスタマイズされた下線を作成できます。

以上がCSS で下線の長さと位置を調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。