[mk]

This is the same problem I have with this approach. It seems like a cool idea, but I don't want to break accessibility. I think you can get around this using aria and having it skip over that element.

See aria-hidden:

http://www.w3.org/TR/wai-aria/states_and_properties#aria-hid...

Authors MAY, with caution, use aria-hidden to hide visibly rendered content from assistive technologies only if the act of hiding this content is intended to improve the experience for users of assistive technologies by removing redundant or extraneous content. Authors using aria-hidden to hide visible content from screen readers MUST ensure that identical or equivalent meaning and functionality is exposed to assistive technologies.

[obeattie]

I may be misunderstanding the spec, but it looks like you have to be able to set element attributes for this approach to work, which I'm fairly certain you can't set with CSS. And I guess even if you can use JS to set the attributes, there's no way to set them on a pseudo-element anyway.