Safari on Windows doesn't like outline inside of :after

Here's a weird edgecase and a little detail on how this issue breaks down

Here is a really strange edgecase of browser support for you, Safari on Windows doesn't like outline when it is called inside the :after pseudoselector.

The first thing to note is that Apple have stopped supporting the Safari browser on Windows (I learned this today from Chris at ExamTime) so this probably isn't something that is going to be high on your to-fix list even if this did crop up in production. I am simply blogging about it because I couldn't find reference to it anywhere on the net and was starting to think I was imagining things.

So this is how the issue breaks down.

  • Safari (assume I mean on Windows unless I say otherwise) supports :after
  • Safari supports outline
  • Safari does not support outline when called inside :after
  • Safari does support border when called inside :after (which basically does the same thing)
  • Internet Explorer 8 does not support border when called inside :after (but does support outline)

This makes little sense to me, I have heard of browsers not supporting certain properties and certain selectors, but not a combination. Here is some code you can use to verify;

   .test:after { outline: green solid 1px; position:absolute; top:0; bottom:0; left: 50%}
  <div class="test"></div>


Recent posts View all


Optionally creating or removing a column or table with Rails migrations

Here's how to go about creating or removing a column optionally using Rails migrations


Using Faker with Rails

A guide to setting up Faker to work within Rails and why you'd want to