어떤 요소가 :: before 및 :: after 가상 요소를 지원합니까?

Question

내가 HTML5에서 <input> 초 동안 좋은 기본 스타일을 마련하려고 다음과 같은 노력 해요 :

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

아아을의 ::after 내용이 표시됩니다하지 않습니다. 의사 요소에 대해 이중 대 대 콜론은 문제가되지 않습니다. 나는 둘 다 시도했다. 또한 pseudo-element와 pseudo-class를 갖는 것은 문제가되지 않습니다. :valid 및 :invalid없이 시도했습니다. I합니다 (:valid 및 :invalid 의사 수업이없는 파이어 폭스,하지만 난 그없이 그것을 시도.) 크롬, 사파리, 파이어 폭스에서 동일한 동작을 얻을

의사 요소가 <div>, <span>, <p>에 잘 작동 , <q> 요소 - 일부는 블록 요소이고 일부는 인라인입니다.

내 질문은 다음과 같습니다. <input>에 ::after이 없다는 점에 동의하는 이유는 무엇입니까? 나는 그것을 나타낼 수있는 사양에서 아무것도 찾을 수 없습니다.

Answer 1

여기에서 읽을 수 있듯이 http://www.w3.org/TR/CSS21/generate.html은 :(문서 트리) 콘텐츠가있는 요소에서만 작동합니다. <input>에는 내용이없고 <img> 또는 <br>도 있습니다.

Answer 2

Webkit을 사용하면 입력 요소를 다음과 같이 할 수 있습니다. 파이어 폭스에서 작동하게하는 방법을 원한다면 입력 자체가 아닌 입력의 레이블에 :: after를 사용할 수 있습니다.

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