Pseudo element affecting outline [duplicate]

Question

Pretty sure this is a bug with Firefox, but perhaps someone can weigh in.

I am applying an outline around a 100x100 box. When you use a pseudo element that is positioned absolute it should remove it from document flow, but it appears it still is affecting the flow of the outline property. IE and Chrome appear to render this as I would expect, where the black outline stays positioned to the main element. Any ideas?

.content
{
  width:100px;
  height:100px;
  outline:1px solid black;
  border:1px solid yellow;
  position:relative;
}

.content:after
{
  position:absolute;
  content:'pseudo';
  background-color:salmon;
  width:200px;
  top:150px;
}

<div class='content'></div>

http://jsbin.com/gatupogiwi/1/edit?html,css,output

Answer 1

You can change the outline style to box-shadow:

outline:1px solid black;

to:

box-shadow: 0px 0px 0px 1px black;