Firefox CSS outline bug?

Question

On Chrome and IE9 the CSS outline that I'm specifying does exactly what I want, and acts as a second border around the element I'm styling.

On Firefox though, the outline gets expanded outwards so that it encompasses the ::after pseudo element that I've generated, as well as the main element.

Is this a bug, or expected? Any good/easy/clean workarounds for it? I'd prefer to avoid adding extra markup if possible.

Answer 1

Yeah it looks like a bug(sorta) in firefox, check it out here. Now some people seem to argue if this is to be expected if children are absolute or not, or rather if the outline should cover 'everything', which is kinda weird, and not at all the expected behavior, when using position: absolute, at least for me.

Solution 1:

• work you way with a extra pseudo selector, for the .main class(I see you're not using the :before class so you can go with that), and work your way from there, seems to work fine all across the board.
• check out the demo here or the snippet bellow

.main {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border: 2px solid #f00;
}
.main:before {
  content: '';
  position: absolute;
  border: 2px solid #00f;
  /*adjust if needed if using border-box*/
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  z-index: -1;
}
.main:after {
  content: 'Hello';
  position: absolute;
  width: 100px;
  text-align: center;
  bottom: -50px;
}
.wtf {
  width: 400px;
  margin: 90px auto;
}

<div class="main"></div>
<div class="wtf">
  <p>In Chrome and Safari the 'Hello' is outside of the outline.</p>
  <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p>
</div>

Solution 2:

• use box-shadow prop. to achieve that effect without extra :pseudo selectors
• check out the demo here or the snippet bellow

.main {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px auto;
  border: 2px solid #f00;
  box-shadow: 0 0 0 2px #00f;
}
.main:after {
  content: 'Hello';
  position: absolute;
  width: 100px;
  text-align: center;
  bottom: -50px;
}
.wtf {
  width: 400px;
  margin: 90px auto;
}

<div class="main"></div>
<div class="wtf">
  <p>In Chrome and Safari the 'Hello' is outside of the outline.</p>
  <p>In firefox the outline is extended and the 'Hello' is inside the outline. Bug from Firefox or is there a way to fix this?</p>
</div>