具有相同宽度的超链接下划线

Question

我们正在开发一个网站，并且我们希望拥有的一个怪癖是链接下划线时，无论链接的文本有多长（或短），线条始终具有相同的宽度。< / p>

你将如何在CSS / jQuery / Javascript中实现它？

Answer 1

你在寻找like this的东西吗？除非锚元素的宽度小于背景图像的宽度，否则这将起作用。

Answer 2

border-bottom是要走的路。

<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;
}

margin-bottom是为了在添加边框时保持大小一致。

http://jsfiddle.net/bfV9t/

Answer 3

不确定我理解，但是这里有：

删除链接的下划线

a:link {
    text-decoration: none;
}

将其添加回悬停状态的链接

a:hover {
    text-decoration: underline;
}