html - etiqueta - pseudo elementos css ejemplos

¿Qué elementos admiten los pseudo-elementos:: before y:: after?

Question

Estoy tratando de encontrar un buen estilo predeterminado para <input> en HTML5 e intenté lo siguiente:

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

Por desgracia, el contenido ::after nunca aparece. No es un problema con dos puntos contra un solo punto para los pseudo-elementos; He intentado ambos. Tampoco es un problema tener un pseudo-elemento y una pseudo-clase; Lo he intentado sin el :valid y :invalid . Obtengo el mismo comportamiento en Chrome, Safari y Firefox (Firefox no tiene las pseudo-clases :valid e :invalid , pero lo intenté sin ellas).

Los pseudo-elementos funcionan bien en los elementos <div> , <span> , <p> y <q> , algunos de los cuales son elementos de bloque y algunos están en línea.

Entonces, mi pregunta es: ¿por qué los navegadores aceptan que <input> s no tenga un ::after ? No puedo encontrar nada en la especificación que indique esto.

Answer 1

Como puede leer aquí http://www.w3.org/TR/CSS21/generate.html ,: after funciona solo en elementos que tienen un contenido (árbol de documentos). <input> no tiene contenido, así como <img> o <br> .

Answer 2

Puede poner un lapso antes o después del elemento. P.ej:

<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 te permite hacer :: after en los elementos de entrada. Si quieres una forma de hacerlo funcionar en Firefox, puedes intentar usar :: after en la etiqueta de la entrada en lugar de la entrada en sí.