Menu
I'm trying to come up with some good default styling for <input>s in HTML5 and tried the following:
input::after { display: inline; } input:valid::after { content: ' ✓ '; color: #ddf0dd; } input:invalid::after { content: ' ✗ '; color: #f0dddd; } Alas, the ::after content never shows up. It's not a problem with double- versus single colons for the pseudo-elements; I've tried both. It's also not a problem with having a pseudo-element and a pseudo-class; I've tried it without the :valid and :invalid. I get the same behavior in Chrome, Safari, and Firefox (Firefox doesn't have the :valid and :invalid pseudo-classes, but I tried it without those.)
The pseudo-elements work fine on <div>, <span>, <p>, and <q> elements -- some of which are block elements and some are inline.
So, my question is: why do browsers agree that <input>s don't have an ::after? I can't find anything in the spec that would indicate this.
452
Special welcome offer: get $100 of free credit. CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
::before Represents a styleable child pseudo-element immediately before the originating element's actual content. ::after Represents a styleable child pseudo-element immediately after the originating element's actual content. By default, this new element will be an inline element.
Definition and UsageThe ::before selector inserts something before the content of each selected element(s). Use the content property to specify the content to insert. Use the ::after selector to insert something after the content.
As you can read here http://www.w3.org/TR/CSS21/generate.html, :after only works on elements that have a (document tree) content. <input> has no content, as well as <img> or <br>.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
