我正在尝试为 <input> 想出一些好的默认样式s 在 HTML5 中并尝试了以下操作:
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>元素——其中一些是 block 元素，一些是内联元素。
所以，我的问题是:为什么浏览器同意 <input>我们没有 ::after ？我在规范中找不到任何表明这一点的内容。
最佳答案
如您所见http://www.w3.org/TR/CSS21/generate.html , :after 仅适用于具有(文档树)内容的元素。 <input>没有内容，还有<img>或 <br> .
关于html - 哪些元素支持::before 和::after 伪元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3538506/