Strange behavior in Firefox with paths and pseudo-elements

Question

Firefox behaves differently than Chrome and Safari (I have not tested other browsers) when you combine paths and pseudo-elements. Is there a way to fix this or is it a mistake?

.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

window shadow

as shown

 .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; }