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

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;


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

Mental.

Why not read some more of our Development Help posts?