テキストの下線の長さを実際のテキストの長さよりも長くするにはどうすればよいですか? _html/css_WEB-ITnose

タイトルの通り、

#nav li a:hover{            border-bottom: 5px solid rgb(255,255,255);        }

ではマウスを上に移動すると下線が表示されますが、下線の長さがテキストの長さと同じになります。 下線の長さをテキストより長くするにはどうすればよいですか?つまり、下線の長さを自分で指定したいのですが、パディングとマージンを試しましたが、下線の長さは常にテキストの長さと同じになります。どうすればこれを実現できますか。 PS:従来の方法では、ulとliを使用し、他の代替方法は当面考慮しません

ディスカッション（解決策）に返信

aタグとの間にdivを追加テキスト、、、次に div にパディングを行います。 。 。 。それ以外の場合は、div の下の境界線を使用して下線を引きます。 。 。 。

別のレイヤーを
で囲みます

このとき、a を設定した後のスパン設定のアンダースコアは a より長くなります。

a要素にpaddingを設定するだけです

a{padding-left:15px;padding-right:15px;}a:hover{border-bottom: 15px solid #f66;}

aタグと本文の間にdiv,,,を追加し、divにpaddingを追加するだけです。 。 。 。それ以外の場合は、div の下の境界線を使用して下線を引きます。 。 。 。

解決しました、ありがとうございます