CSS schema that includes fields

Question

I am trying to highlight elements on the mouse that are similar to Chrome Inspector / Firebug by adding outline: 4px solid greenusing CSS.
Use outlineworks great because it does not take up space in the box. Thus, the layout will not break, and everything remains in place.

My approach is great for items with width, height, paddingand border. However outlinedoes not include margin.

I am looking for any easy solution, so that outlinewraps the whole element, including margin.
I found outline-offsetone that offsets the outline using a custom number of pixels, but is not supported in IE and equally on all four sides.

If possible, I would like not to add 4 <div />for four sides to simulate the behavior outline. Any ideas?

Answer 1

The solution could be to use an absolutely positioned pseudo-element and apply a border to it when you hover.

You can specify the values ​​of the upper and lower elements of the pseudo-element, as well as the left / right values ​​that compensate for the fields of the element:

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>

Run codeHide result