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

问题

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.

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

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

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

来源：https://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements

标签

html

css

forms

pseudo-element