2
私たちはサイトを開発しています。私たちが望むものは、どれくらいの長さ（または短い）のテキストであっても常に同じ幅を持つ線で囲まれたときに下線が引かれるリンクですリンクはです。ハイパーリンクと同じ幅の下線
これをCSS/jQuery/Javascriptでどのように実装しますか？
A
答えて
4
何かlike thisをお探しですか？アンカー要素の幅が背景画像よりも小さい場合を除き、これは機能します。
1
はわからない私は理解しますが、ここに行く：
は、リンクについては下線を削除
a:link {
text-decoration: none;
}
がホバー状態
a:hover {
text-decoration: underline;
}
+0
私の質問をもう一度読んでください。テキストの長さに関わらず、下線は同じ幅にする必要があります。 300ピクセルとしましょうあなたのソリューションはテキスト全体に下線を引くので、時には長すぎることもあり、時には短すぎることもあります。 – dfme
+0
私は参照してください。たぶんあなたは少し明確にするためにあなたの質問にこの余分な情報を追加する必要があります。 –
2
国境内のリンクのためにそれをバックに追加します - 底は行く道です。
<div class="underlined"><a href="#">blah1</a></div>
<div class="underlined"><a href="#">blah1 asdfdf adfefef</a></div>
と
a:hover {
text-decoration: none;
}
a {
text-decoration: none;
}
.underlined{
margin-bottom: 1px;
}
.underlined:hover
{
margin-bottom: 0px;
border-bottom: 1px solid black;
width: 200px;
}
マージン下あなたが境界線を追加するときに、一貫したサイズを維持することです。
+0
私はmargin-leftを追加します：auto; margin-right：auto;テキストが下線よりも長い場合は特に外観よりも中心に置く –
+0
テキストがスクリーンショットのように指定された幅よりも長い場合、これは機能しません。 –
テキストが行より短いことがあります。だから私は、これは動作しませんね？ – dfme
Hmm。私はこれを試してみましたが、それは動作します！ありがとう – dfme