Which elements support the ::before and ::after pseudo-elements?
Solution 1
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>
.
Solution 2
You can put a span before or after the element. E.g.:
<style>
#firstName:invalid+span:before {
content: "** Not OK **";
color: red;
}
#firstName:valid+span:before {
content: "** OK **";
color: green;
}
</style>
<input type="text"
name="firstName"
id="firstName"
placeholder="John"
required="required"
title="Please enter your first name (e.g. John )"
/><span> </span>
Solution 3
Webkit lets you do ::after on input elements. If you want a way to make it work in Firefox you could try using ::after on the input's label rather than the input itself.
Related videos on Youtube
James A. Rosen
Updated on May 01, 2022Comments
-
James A. Rosen almost 2 years
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.-
BoltClock over 11 yearsFor the record, double colons and single colons were intended to distinguish pseudo-elements and pseudo-classes, because people were munging both of them together into an umbrella term called "pseudo-selectors".
-
-
Web_Designer over 12 yearsSad truth you have there. :( Some pretty sweet things could be accomplished if the
<img>
,<input>
, and some other elements were supported. Such as image tooltips with alt attribute, and such. Thanks nevertheless! -
MrWhite over 11 yearsNot sure if this has reverted, but
::after
oninput
elements does not appear to work in Chrome 21 or Safari 5.1.7 (Windows). jsfiddle.net/V8cvQ/13 -
Josh Bedo almost 10 years@Web_Designer agreed, I just put something together with
<input>
and the after selector where it hides the input visibility but shows a star over the input with the :after selector -
podperson over 3 yearsThis is actually not quite right. There is a specific category of elements including <img> and <input>, but also <select>...</select> that are immune to various subsets of CSS owing to the assumption by the W3C that these would specify OS-specific implementations. This is somewhat confusing because <input> controls now pretty much obey CSS entirely (but not pseudo elements) while the others don't.