悬停时链接下面的链接

Question

如何在链接下方添加一条短线？该行应仅在悬停时可见.我尝试使用border-bottom,但是那条线是100%的链接宽度,我希望线条比链接短.

这是我尝试制作的效果的示例图像.

Answer 1

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

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

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

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

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它让它居中,而父母没有宽度.

在这里演示

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

在这里演示

所以我现在被告知我甚至应该指出最显而易见的事情,所以这里只是为那些不知道width可能是百分比的人提供更新.

width: 70%;

将宽度更改为5px,70%因此它将随文本的宽度扩展.

在这里演示