包含边距的 CSS 轮廓

Question

我正在尝试通过添加 outline: 4px solid green 和 CSS 来突出显示类似于 Chrome Inspector / Firebug 的鼠标悬停元素。
使用outline 可以正常工作，因为它不会占用盒子模型中的任何空间。这样，布局不会中断，一切都保持原位。

我的方法适用于 width、height、padding 和 border 的元素。但是，outline 不包括 margin。

我正在寻找任何简单的解决方案，以便 outline 环绕整个元素，包括 margin。
我发现outline-offset 将轮廓偏移了自定义数量的像素，但在 IE 中不受支持，并且在所有四个方面都相同。

如果可能，我想避免在四个边上添加 4 个<div />s 来模仿outline 的行为。有什么想法吗？

Answer 1

一种解决方案是使用绝对定位的伪元素并在悬停时为其应用边框。

你可以给伪元素顶部/底部和左/右值来补偿元素的边距：

div {
  position: relative;
  width: 150px;
  margin: 10px 20px 30px 40px;
  padding: 20px 40px;
  background:gold;
  z-index:1;
}
div:after {
  content: '';
  position: absolute;
  top: -10px;
  right: -20px;
  bottom: -30px;
  left: -40px;
  box-sizing: border-box;
  z-index:-1;
}
div:hover:after {
  border: 1px solid green;
}

<div>content <a href="#">link</a></div>