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