包含边距的 CSS 大纲

Question

我试图通过添加 outline: 4px solid green 来突出显示鼠标悬停时的元素，类似于 Chrome Inspector/Firebug使用 CSS。
使用 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>