Can i prevent :after pseudo element from being read by screen readers?

Question

Please consider the following markup:

Email Address Required         


        

Answer 1

Try this, it targets screen readers with a media query and hides the star

@media reader, speech, aural {
    .required:after {
        display: none;
        visibility: hidden;
    }
}

Update:

As the support for my initial solution doesn't seem to be that good I have thought of a alternative. It occurred to me that the only way to ensure that its not read by a screen reader (w/o extra markup) would be to have no asterisk at all! However you could add a image with css to look like a asterisk like so:

.required:after {
    content:'';
    display: inline-block;
    width: .5em;
    height: .5em;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b5/Asterisk.svg);
    background-size: .5em .5em;    
    vertical-align: top;
    margin-left: .15em;
    margin-top: .1em;
}

http://jsfiddle.net/3a1dvdag/