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

estoy tratando de llegar a un buen estilo por defecto para <input> s en HTML5 y trató lo siguiente:¿Qué elementos admiten los pseudo-elementos :: before y :: after?

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 :valid y :invalid. Puedo obtener el mismo comportamiento en Chrome, Safari y Firefox (Firefox no tiene los :valid y :invalid pseudo-clases, pero lo intentó sin ellos.)

Los pseudo-elementos funcionan bien en <div>, <span>, <p> y <q> elementos, 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 tienen un ::after? No puedo encontrar nada en la especificación que indique esto.

Fuente

2010-08-21 James A. Rosen

Para el registro, los dos puntos dobles y dos puntos individuales estaban destinados a distinguir los pseudo-elementos y pseudo-clases ** **, porque la gente se Munging los dos juntos en un término genérico que se llama "pseudo-selectores ". – BoltClock

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

Fuente

2010-08-21 19:02:33 davehauser

Triste verdad que tienes allí. :(Algunas cosas bastante dulces podrían lograrse si el '', '', y algunos otros elementos fueron compatibles. Tal como la información sobre herramientas de imagen con atributo alt, y ¡gracias de todos modos! –

@Web_Designer estuvo de acuerdo, simplemente armé algo con '' y el selector posterior donde oculta la visibilidad de la entrada pero muestra una estrella sobre la entrada con: después del selector –

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

Fuente

2011-02-25 14:59:07

No estoy seguro si esto se ha revertido, pero ':: after' en los elementos' input' no parece funcionar en Chrome 21 o Safari 5.1.7 (Windows). http://jsfiddle.net/V8cvQ/13/ – MrWhite

Puede poner un tramo antes o después del elemento. Por ejemplo:

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

Fuente

2013-04-16 02:32:34 cobberboy

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

Respuesta

Cuestiones relacionadas