在悬停时添加底部边框，仅CSS [英] Adding a bottom border on hover, CSS only

问题描述

当鼠标悬停时，如何使线条仅出现在链接图像的底部?

How can I make a line appear only on the bottom of a linked image when hovered?

我可以在悬停时显示一个内部边框，但是我只希望显示底部边框.

I can get an inner border to display on hover, but I only want border-bottom to display.

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

Here is what I have so far, even though it is with the outline property instead of border:

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

未悬停:

已悬停:

推荐答案

在不影响链接大小(边界附加到元素外部)的情况下获得相同结果的一种方法是使用插入框阴影.

One option to get the same result without affecting the size of your link (borders append to the outside of the element) is to use an inset box-shadow.

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

Which in your example would be to change your a:hover to the following:

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

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

You can see the fiddle here: https://jsfiddle.net/kLLxkdw4/

这篇关于在悬停时添加底部边框，仅CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！