Which elements support the ::before and ::after pseudo-elements?

Question

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.

For 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". — BoltClock, Oct 04 '12 at 14:01

score 31 · Accepted Answer · edited Apr 16 '13 at 03:34

31

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

edited Apr 16 '13 at 03:34

BoltClock

700,868
160
1,392
1,356

answered Aug 21 '10 at 19:02

davehauser

5,844
4
30
45

1

Sad truth you have there. :( Some pretty sweet things could be accomplished if the ``, ``, and some other elements were supported. Such as image tooltips with alt attribute, and such. Thanks nevertheless! – Web_Designer Nov 03 '11 at 17:58
@Web_Designer agreed, I just put something together with `` and the after selector where it hides the input visibility but shows a star over the input with the :after selector – Josh Bedo Jun 13 '14 at 14:38
This is actually not quite right. There is a specific category of elements including and , but also 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 controls now pretty much obey CSS entirely (but not pseudo elements) while the others don't. – podperson Dec 10 '20 at 20:48

cobberboy · Answer 2 · 2018-07-12T07:24:26.950

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>&nbsp;</span>

score 5 · Answer 3 · answered Feb 25 '11 at 14:59

5

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.

answered Feb 25 '11 at 14:59

Andrew Philpott

939
1
10
11

2

Not sure if this has reverted, but `::after` on `input` elements does not appear to work in Chrome 21 or Safari 5.1.7 (Windows). http://jsfiddle.net/V8cvQ/13/ – MrWhite Aug 10 '12 at 15:08

Which elements support the ::before and ::after pseudo-elements?

3 Answers3

Linked

Related