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

Question

悬停时如何使线条仅出现在链接图像的底部？

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

这是我到目前为止所拥有的，即使它使用的是大纲属性而不是边框​​：

#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-bottomon的问题:hover。它甚至远远超出了这一点，并且还改变background了整个#link元素:hover的CSS transitions.

CODEPEN 演示

HTML 标记

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

CSS 效果和过渡

#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

如果您希望它与您的img内部一起a使用，您可以在锚点上使用pseudo-element，然后对其应用边框。还。为避免边框附加到链接的外部，您应该改用插图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>

Answer 5

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

Answer 6

将您的图像放在一个 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>