哪些元素支持:: before和:: after伪元素？

Question

我试图<input>在HTML5中为s 提出一些好的默认样式并尝试以下方法:

input::after         { display: inline; }
input:valid::after   { content: ' ? '; color: #ddf0dd; }
input:invalid::after { content: ' ? '; color: #f0dddd; }

唉,::after内容永远不会出现.伪元素的双冒号与单冒号不是问题; 我试过了两个.拥有伪元素和伪类也不是问题; 我试过它不:valid和:invalid.我在Chrome,Safari和Firefox中都有相同的行为(Firefox没有:valid和:invalid伪类,但我没有那些尝试过.)

伪元件正常工作的<div>,<span>,<p>,和<q>元素-其中一些是块元件和一些是内联.

所以,我的问题是:为什么浏览器同意<input>s没有::after？我在规范中找不到任何可以表明这一点的内容.

Answer 1

正如您可以在这里阅读http://www.w3.org/TR/CSS21/generate.html ,:仅适用于具有(文档树)内容的元素.<input>没有内容,以及<img>或<br>.

Answer 2

您可以在元素之前或之后放置跨度.例如:

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

Answer 3

Webkit允许你在输入元素之后执行::.如果你想要一种让它在Firefox中运行的方法,你可以尝试在输入的标签上使用:: after而不是输入本身.