在悬停时添加底部边框，仅限CSS

Question

如何在悬停时仅在链接图像的底部显示一条线？

我可以在悬停时显示内边框，但我只想显示边框底部。

这是我到目前为止所拥有的，即使它是使用outline属性而不是border：

#links a img, #links a{ border: none; float: left; }
#links a{ margin: 3px; }
#links a:hover{ outline: 3px solid black; }

没有徘徊：

盘旋：

Answer 1

在不影响链接大小（边框附加到元素外部）的情况下获得相同结果的一个选项是使用插入框阴影。

在您的示例中，您将a:hover更改为以下内容：

#links a:hover { 
    box-shadow: inset 0 -10px 0 0 cyan; 
}

你可以在这里看到小提琴：https://jsfiddle.net/kLLxkdw4/

Answer 2

只需在border-bottom上分配:hover属性：

#links a:hover{
    border-bottom: 3px solid #00f; /* or whatever colour you'd prefer */
    outline: 3px solid black;
}

如果短语“锚定图片”应该被视为img a元素，那么我建议：

#links a:hover img {
    border-bottom: 3px solid #00f; /* or whatever you'd prefer */
}

Answer 3

试试我刚刚专门为您编写的代码。此解决方案可以解答有关在border-bottom上添加:hover的问题。它甚至远远超出了这个范围，并更改了background上#link元素的:hover以及CSS transitions。

A DEMO ON CODEPEN

HTML标记

<div id="links">
  <a href="#">Example Link</a>
</div>

CSS Effets＆amp;转换

#links a{
  color:#fafafa;
  text-decoration:none;
  background-color:#8b0000;
  padding:15px;
  border-radius:5px;
  font-size:1.3em;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;

}
#links a:hover{
  background-color:#fff;
  color:#002f5b;
  border-bottom:5px solid #002f5b;
}

Answer 4

尝试这个
    #links a：hover {border-bottom：inset 8px＃000; }

Answer 5

将图像放入div并添加遮罩div。

#mask {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 3px solid transparent;
}
#mask:hover {
  border-bottom: 3px solid cyan;
}
#outerDiv {
  display: inline-block;
  position: relative;
}
img {
  display: block;
}

<div id='outerDiv'>
  <img src="https://www.gravatar.com/avatar/087039a00851e75ff483470e3aba89c9?s=32&d=identicon&r=PG" />
  <div id='mask'></div>
</div>

Answer 6

如果您希望它与img中的a一起使用，则可以在锚点上使用pseudo - 元素，然后将边框应用于该值。也。要避免边框附加到链接的外部，您应该使用插入box-shadow代替：

a {
  display: inline-block;
  position: relative;
}

a:hover:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  box-shadow: inset 0 -20px 0 #11c0e5;
}

a img {
  display: block;
}

<a href="#">
  <img src="http://oi65.tinypic.com/241jlzk.jpg"/>
</a>