如何缩短边框？

Question

当您将鼠标悬停在图片上时，如何在div上做一个短边框？

Answer 1

您可以使用伪元素:after，因此将如下所示：

.square {
  height: 128px;
  width: 128px;
  border: 3px solid black;
  position: relative;
}

.square:hover:after {
  content: "";
  height: 68px;
  width: 68px;
  border: 3px solid red;
  position: absolute;
  right: -3px;
  bottom: -3px;
  border-left: 0;
  border-top: 0;
}

Answer 2

.border{
  height: 100px;
  width: 100px;
  border: 5px solid black;
}

.border:hover:after {
  content: "";
  border-right: 5px solid red;
   border-bottom: 5px solid red;
  width: 80px;
  height: 80px;
  position: absolute;
  margin: 20px;
  display:block;
}

<div class="border">
</div>

应该使您摆脱困境。

另请参阅小提琴：JSFiddle