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

Question

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

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

Answer 1

Как вы можете прочитать здесь http://www.w3.org/TR/CSS21/generate.html,: after работает только с элементами, имеющими (дерево документов) содержимое.<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 для метки ввода, а не для самого ввода.