Weird behavior in Firefox with outlines and pseudo-elements

css, firefox, pseudo-element

Solution

Now used to

box shadow

as like this

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

.wtf {
  width: 400px;
  margin: 90px auto;
}

Demo

Problem

Firefox behaves differently than Chrome and Safari (I haven't tested others browsers) when you combine outline and pseudo-elements. Is there a way to fix it or is this a bug? ``` .main { position: relative; width: 100px; height: 100px; margin: 10px auto; border: 2px solid #f00; outline: 2px solid #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> ``` Demo: http://codepen.io/romainberger/pen/nuxlh Edit: Tested in Firefox 20.0, Chrome 28 and Safari 5.1

Original source