#one button:disabled:hover:after {
content: 'Please fill in the captcha';
}
This is putting the new content, but it is not deleting the old content.
<button type='submit' class="button" id='one' diabled>Send</button>
How should I tackle this?
Like this, perhaps…
CSS
#one:disabled::before {
content: 'send';
}
#one:disabled:hover::before {
content: '';
}
#one:disabled:hover:after {
content: 'Please fill in the captcha';
}
HTML
<button type="submit" class="button" id="one" disabled></button>
coothead
Two colons are correct. See https://stackoverflow.com/questions/13400323/why-are-there-two-colons-here-spanbefore#13400379
In fact there should be 2 before the after as well (if you get my drift).
Oh, and @coothead’s code works for me.
Can you please elaborate more on this so that I can remember this rest of my life? I mean using before two times?
I don’t believe the CSS is read by screen readers…right? So maybe have the text there but font-size: 0; it so the text is still there to be read by screen readers?
Hi there codeispoetry,
" CSS3 introduced the
::beforenotation (with two colons)
to distinguish pseudo-classes from pseudo-elements.
Browsers also accept:before, introduced in CSS2."
Further reading:-
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
coothead
Hi there RyanReecse,
“…so the text is still there to be read by screen readers”
you are, of course quite right, 
As a stickler for accessibility, there is no excuse for my faux pas.
I will go into the back room and severely flagellate myself for my
unacceptable lack of concentration. 
coothead
I’ll forgive you this time.
Don’t expect a 3rd chance. 
I recommend wet spaghetti.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
