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