Weird behavior in Firefox with outlines and pseudo-elements - css

Question

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

Answer 1

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

Answer 2

No need to use z-index.
.main {
position: relative;
width: 100px;
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;
}
.wtf {
width: 400px;
margin: 90px auto;
}