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




разница между before и after (2)

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

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


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

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





pseudo-element