CSS轮廓包括边距

Question

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

我的方法对具有width，height，padding和border的元素很有效。但是，outline不包括margin。

我正在寻找任何简单的解决方案，使outline包围整个元素，包括margin。
我已经找到了outline-offset，它可以将轮廓线偏移自定义像素数量，但是IE不支持，并且四个边的效果相同。

如果可能，我想避免添加4个<div />以模仿outline的行为。有什么建议吗？

- Horen

---

https://dev59.com/Xmcs5IYBdhLWcg3wHwbU - odedta

我建议使用伪类。 - Morpheus

问题在于，如果您使用CSS属性或伪类，很可能会覆盖现有的样式。 - Dominic

@Morpheus，请建议一个伪类…… - odedta

答案已经由@odedta提供。 - Morpheus

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>

- web-tiki

---

非常好！你为什么要添加 z-index: -1？当从左侧和右侧悬停时，它似乎会产生问题... - Horen

@Horen 负的 z-index 会防止伪元素覆盖在元素上方。如果其中有交互元素（如链接），则无法在伪元素后面进行点击。我还通过为 div 添加 z-index 来纠正了你所说的问题。 - web-tiki

@Horen，我还在 div 中添加了一个链接。尝试移除 z-index，你就会明白我在说什么了。 - web-tiki