Firefox ведет себя иначе, чем Chrome и Safari (я не тестировал другие браузеры), когда вы комбинируете контур и псевдоэлементы. Есть ли способ исправить это или это ошибка?

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

Демо-версия:http://codepen.io/romainberger/pen/nuxlh

Изменить: протестировано в Firefox 20.0, Chrome 28 и Safari 5.1