Recently I was working on adding some styling in an app and I was happy to discover that the CSS spec for visibility allows for nested elements to declare themselves visible.
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.
This came in handy, allowing me to make a container hidden until a specific element was focused, but then allowing me to make an icon within that container visible. As I was cleaning this up further I decided the icon really didn’t have any semantic meaning so I shifted it into a CSS after pseudo element.
Turns out that IE supports pseudo elements fine, and it supports nested visibility just fine, but it doesn’t support setting a pseudo element to visible when the element it is being added to is hidden. As far as I can tell from the multiple places pseudo elements are discussed in the specs they should be treated the same as any other child, and it appears that that is how Chrome, FireFox and Opera have interpretted the spec as well. However IE, even through IE 11, does not render this the same. I created this jsfiddle which demonstrates the behavior. In Chrome and FireFox you see the BEFORE and AFTER content, but in IE you only see the nested child content. I have some screenshots of this on browserstack. There do appear to be some other people that have run into this issue as well, but apparently not too many.
In the end I was able to work around this by making all of the children of my parent container
visibility: hidden; and
then specifically making the pseudo element visible. This didn’t clutter my markup since I was working on a
element already. So in the end I had a reasonable workaround with hiding all the children, but that wouldn’t work in the
scenario my jsfiddle outlines, since the text that is a direct child of the container element would not be hidden.
Oh IE, will you ever be consistent?