CSSでボーダーの下線を作成する方法

1. border-bottomプロパティを使用する方法: CSSのborder-bottomプロパティを使用すると、要素の下部にボーダーの下線を追加することができます。以下は使用例です。

   .underline {
    border-bottom: 1px solid black;
   }

   上記の例では、クラス名が「underline」の要素に対して1ピクセルの黒い実線の下線が追加されます。

2. ::after疑似要素を使用する方法: ::after疑似要素を使用すると、要素の後ろに別の要素を追加することができます。この方法を使用してボーダーの下線を作成することができます。以下は使用例です。

   .underline::after {
    content: "";
    display: block;
    border-bottom: 1px solid black;
   }

   上記の例では、クラス名が「underline」の要素の後ろに空のブロック要素が追加され、その要素に1ピクセルの黒い実線の下線が適用されます。

3. text-decorationプロパティを使用する方法: text-decorationプロパティを使用すると、テキストの装飾を行うことができます。このプロパティを使用してボーダーの下線を作成することもできます。以下は使用例です。

   .underline {
    text-decoration: underline;
   }

   上記の例では、クラス名が「underline」のテキストに下線が追加されます。

これらはいくつかの一般的な方法ですが、他にもさまざまな方法があります。使用する方法は要件やデザインによって異なります。以上の方法を参考にして、ボーダーの下線を作成する方法を学んでみてください。