Pseudo content issue

[codeispoetry]

#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?

[coothead]

@codeispoetry

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

[codeispoetry]

@coothead

::

I think this should be :

Two sends are coming. also send not disappearing.

[Gandalf]

@codeispoetry

I think this should be :

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.

[codeispoetry]

@coothead

#one:disabled::before { content: ‘send’; } #one:disabled:hover::before { content: ‘’; }

Can you please elaborate more on this so that I can remember this rest of my life? I mean using before two times?

[RyanReese]

@coothead

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

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?

[coothead]

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

[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

[RyanReese]

@coothead

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.

[Gandalf]

@coothead

severely flagellate myself

I recommend wet spaghetti.