悬停时链接下面的链接

Question

如何在链接下方添加一条短线？该行应仅在悬停时可见。 我尝试使用border-bottom，但是这条线是100％的链接宽度，我希望该行更短而不是链接。

以下是我尝试制作效果的示例图像。

Answer 1

您可以尝试使用::after伪元素：

＆＃13;

＆＃13;

a {
  position: relative;
  text-decoration: none;
}

a:hover::after {
  content: "";
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: 0;
  border: 1px solid black;
}

＆＃13;

<a href='#'>Demo Link</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是我刚才想到的，看看你的想法。所以我们使用:after并在文本下创建一行。这仅在父级具有宽度（用于居中）时才有效。

<强> HTML：

<div>Test</div>

<强> CSS：

div {
    width: 30px;
}
div:hover:after {
    content: "";
    display: block;
    width: 5px;
    border-bottom: 1px solid;
    margin: 0 auto;
}

DEMO

---

更新了CSS：

div {
    display: inline-block;
}

我不确定为什么我没有想到这一点，但你可以使用inline-block将它放在中心而父母没有宽度。

DEMO HERE

---

这是一个使用相同方法的链接，只是让你感到困惑。

DEMO HERE

---

所以我现在被告知我甚至应该指出最显而易见的事情，所以这里的更新仅适用于那些不知道width可能是百分比的人。

width: 70%;

将宽度从5px更改为70%，以便它会随着文字的宽度而扩展。

DEMO HERE

Answer 3

编辑： Ruddy的解决方案具有相同的结果，并且更加优雅，所以基于此，我最近使用它添加了转换，使它更引人注目，我认为在这里分享是有用的：

 a {
   display: inline-block;
   text-decoration:none
 }
 a:after {
   content: "";
   display: block;
   width: 0;
   border-bottom: 1px solid;
   margin: 0 auto;
   transition:all 0.3s linear 0s;
 }

 a:hover:after {
   width: 90%;
 }

jsfiddle link

（以下原文答案）

Check this我想出了一个小提琴：

 <a class="bordered" href="#">I am a link, hover to see</a>


 a.bordered {  
 text-decoration:none;
 position: relative;
 z-index : 1;
 display:inline-block;
 }

a.bordered:hover:before {
content : "";
position: absolute;
left    : 50%;
bottom  : 0;
height  : 1px;
width   : 80%;
border-bottom:1px solid grey;
margin-left:-40%;
}

根据百分比，您可以使用a.bordered：hover：在页边距和左侧位置之前。

Answer 4

只需使用此课程：

.link:hover {
    background-image:url("YOUR-SMALL-LINE-BOTTOM.png")
}

这样，当您将鼠标悬停在元素上时，就会出现该行。您可以在图像中指定线条的大小。

Answer 5

尝试为边框创建另一个Div。并根据您的选择调整该div的宽度。我希望这会有所帮助。

Answer 6

这是怎么回事？

a {text-decoration:none;position:relative;}
a:hover:before {content:"_";position:absolute;bottom:-5px;left:50%;width:10px;margin:0 0 0 -5px;}

查看这个小提琴：http://jsfiddle.net/h7Xb5/

Answer 7

use underline or if u want the line to be much shorter try scalar vector graphics(svg) with this you can have custom lines.
<svg id="line "height="40" width="40">
  <line x1="0" y1="0" x2="700" y2="20" style="stroke:rgb(125,0,0);stroke-width:2" />