Pseudo content issue

#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

2 Likes

I think this should be :

Two sends are coming. also send not disappearing.

button

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.

3 Likes

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?

3 Likes

Hi there codeispoetry,

" CSS3 introduced the ::before notation (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

3 Likes

Hi there RyanReecse,

“…so the text is still there to be read by screen readers”

you are, of course quite right, :winky:

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. :wonky:

coothead

3 Likes

I’ll forgive you this time.

Don’t expect a 3rd chance. :japanese_goblin:

4 Likes

I recommend wet spaghetti.

3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.