仅限轮廓边框底部

Question

当光标在图像上方时,我想创建一个底部轮廓边框,我不知道如何做到这一点.我想使用这种内部边框,因为我不希望传统的边框底部存在布局问题.

这是我当前的代码,到处都是轮廓边距:

.img-lightbox-small{
width:110px;
height:110px;
margin: 1px;}

a img.img-lightbox-small:hover{
opacity:1;
outline: 3px solid #4bb6f5;
outline-offset: -3px;
}

Answer 1

要解决您可以使用的问题border-bottom,设置它margin-bottom: -1px(边框的大小).这将阻止它移动下面的内容.

HTML:

<div></div>
test

CSS:

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}

在这里演示