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;

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

Recent posts View all

Freelancing

Why we have ads

We run ads on the site, this article talks about how we try and make them not terrible and why we monetise in the first place

Accessibility

Writing accessible hashtags

Write accessible hashtags by camel casing them. Because ThisReadsBetter thanthisdoes.