que - selectores avanzados css
CSS: después de no agregar contenido a ciertos elementos (2)
Tengo problemas para entender el comportamiento del CSS :after propiedad. De acuerdo con la especificación ( here y here ):
Como indican sus nombres, los pseudo-elementos
:beforey:afterespecifican la ubicación del contenido antes y después del contenido del árbol de documentos de un elemento.
Esto no parece imponer restricciones sobre qué elementos pueden tener una propiedad :after (o :before ). Sin embargo, parece que solo funciona con elementos específicos ... <p> funciona, <img> no, <input> does not, <table> does. Podría probar más, pero el punto está hecho. Tenga en cuenta que esto parece bastante uniforme en todos los navegadores. ¿Qué determina si un objeto puede aceptar a :before y :after propiedad?
:before y :after no están obligados a trabajar para elementos reemplazados, y las especificaciones de CSS no especifican cómo funcionarían para ellos, y el concepto de elemento reemplazado es algo vago.
La especificación CSS 2.1 here claramente que pueden funcionar para elementos reemplazados, simplemente diciendo que no "define completamente" cómo. Esto se relaciona con el problema de que se espera que un elemento reemplazado tenga su propia representación visual, que no está controlada por CSS, mientras que los pseudoelementos deberían agregar algo al contenido del elemento. La especificación agrega que esto se definirá "con más detalle" en una especificación futura, pero esto no ha tenido lugar hasta el momento.
Los vendedores del navegador simplemente decidieron evitar problemas al no implementar estos pseudo-elementos para algunos elementos.
No está claro para nada qué significa "elemento reemplazado", y el significado parece haber cambiado algo. A menudo se interpreta como que significa lo mismo que elemento vacío (un elemento con contenido declarado EMPTY , es decir, un elemento que no puede contener ningún contenido), pero CSS 2.1 muestra una hoja de estilos de muestra con el selector br:before (aunque los navegadores han ignorado esto , implementando br su propio camino). Se puede argumentar que cada vez más elementos se han movido dentro del alcance de la representación CSS, al menos en parte. Por ejemplo, un elemento de input (incluyendo su fuente, colores, etc.) es ampliamente controlable con CSS en los navegadores modernos.
Los navegadores actuales (Firefox, IE, Chrome) no parecen ser compatibles con :after y :before pseudo-elements para elementos vacíos que no sean hr . Por hr , IE y Chrome colocan el contenido generado dentro de un cuadro delimitado, que es la implementación de hr ; el contenido hace que la caja sea más alta. Firefox coloca el contenido de ambos (!) Pseudo-elementos después de la regla horizontal que es su implementación de hr . Esta variación ilustra los tipos de problemas de "interacción" a los que se hace referencia en CSS 2.1.
A menudo se afirma que estos pseudo-elementos no se pueden usar para elementos vacíos ya que sus definiciones HTML no permiten ningún contenido. Este es un error de categoría. Las reglas de sintaxis de un lenguaje de marcado no restringen lo que puedes hacer en CSS
Para concluir :after y :before actualmente no se pueden usar para elementos vacíos (excepto marginalmente para hr ), pero esto se debe principalmente a implementaciones y puede cambiar en el futuro.
img y input son ambos elementos reemplazados .
Un elemento reemplazado es cualquier elemento cuya apariencia y dimensiones están definidas por un recurso externo. Los ejemplos incluyen imágenes (
<img>tags), complementos (<object>tags) y elementos de formulario (<button>,<textarea>,<input>y<select>tags). Todos los demás tipos de elementos se pueden denominar elementos no reemplazados.
:before y :after solo :after trabajar con elementos no reemplazados.
De here :
Nota. Esta especificación no define completamente la interacción de
:beforey:aftercon los elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una especificación futura.
Con span:before, span:after , el DOM se ve así:
<span><before></before>Content of span<after></after></span>
Evidentemente, eso no funcionará con <img src="" /> .