Какие элементы поддерживают псевдо-элементы:: before и:: after?

Я пытаюсь придумать хороший стиль стилей по умолчанию для <input> в 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>, некоторые из которых являются блочными элементами, а некоторые являются встроенными.

Итак, мой вопрос: почему браузеры согласны с тем, что <input> не имеет ::after? Я не могу найти ничего в спецификации, которая указала бы это.

Ответ 1

Как вы можете прочитать здесь http://www.w3.org/TR/CSS21/generate.html: после работы только с элементами, имеющими (дерево документа). <input> не имеет содержимого, а также <img> или <br>.

Ответ 2

Webkit позволяет выполнять следующие действия после ввода. Если вы хотите, чтобы он работал в Firefox, вы можете попробовать использовать:: after на входной метке, а не сам вход.

Ответ 3

Вы можете поместить пробел до или после элемента. Например:.

<style>
#firstName:invalid+span:before {
    content: "** Not OK **";
    color: red;
}
</style>

<input type="text" name="firstName" id="firstName" placeholder="John"
    required="required" 
    title="Please enter your first name (e.g. John )"
    /><span>&nbsp;</span>