html - icon - A qué se pueden aplicar los elementos de cierre automático antes y después de los pseudo elementos

pseudo elementos css

Question

Estoy particularmente interesado en comprender cuándo se pueden aplicar los pseudo-elementos ::before y ::after a las etiquetas de cierre automático. Esta es la definición de estos pseudo-elementos, de acuerdo con las Especificaciones de CSS del Contenido Generado W3 :

12.1 Los pseudo-elementos: antes y: después : los autores especifican el estilo y la ubicación del contenido generado con los pseudo-elementos: antes y: después. Como lo indican sus nombres, el: antes y: después de los pseudo-elementos especifican la ubicación del contenido antes y después del contenido del árbol de documentos de un elemento. La propiedad ''contenido'', junto con estos pseudo-elementos, especifica qué se inserta.

Sobre esta base, parece que estos pseudo-elementos están destinados a modificar el contenido de un elemento. Como lo entiendo (aunque no puedo encontrar una fuente autorizada para apoyar esto), "contenido" se define más o menos como "el material entre las etiquetas de apertura y cierre"; por lo tanto, creo que los elementos que no tienen "contenido" (como una etiqueta br HTML) no deberían admitir los pseudo-elementos ::before y ::after .

Extrapolando esto, y en base a mi comprensión de la definición del "contenido" de un elemento, creo que ninguna de las etiquetas de cierre automático admitiría los pseudo-elementos ::before y ::after . En la práctica, sin embargo, he encontrado que muchas etiquetas de cierre automático tienen soporte completo.

Aparte de la cuestión de lo que se define como "contenido", también podemos considerar el hecho de que los pseudo-elementos se representan como (aunque técnicamente no lo son) hijos de DOM del elemento al que se aplican. El hecho de que las etiquetas de cierre automático no puedan tener hijos DOM parece apoyar la idea de que las etiquetas de cierre automático no deberían tener pseudo-elementos.

En mi intento de encontrar la respuesta a esta pregunta, armé una pequeña prueba para determinar qué etiquetas de cierre automático (elegí un puñado de ellas cuando me vinieron a la mente) admiten ::before y ::after , y he incrustado esa prueba en un fragmento de código a continuación. Estoy obteniendo resultados radicalmente diferentes en todos los navegadores y puedo encontrar muy poca coherencia.

.test {
  display: inline;
  visibility: hidden;
}

span + *::after {
  visibility: visible;
  color: green;
  content: ''YES'';
}

<h3>Which Self-Closing Tags Support Pseudo Elements?</h3>
<div><span>Text Input:</span> <input type="text" class="test"></div>
<div><span>Checkbox Input:</span> <input type="checkbox" class="test"></div>
<div><span>Radio Input:</span> <input type="radio" class="test"></div>
<div><span>Submit Input:</span> <input type="submit" class="test"></div>
<div><span>Reset Input:</span> <input type="reset" class="test"></div>
<div><span>Button Input:</span> <input type="button" class="test"></div>
<div><span>Image:</span> <img class="test"></div>
<div><span>Line Break:</span> <br class="test"></div>
<div><span>Horizontal Rule:</span> <hr class="test"></div>
<div><span>Link:</span> <link class="test"></div>
<div><span>Meta:</span> <meta class="test"></div>

¿Es mi interpretación de la especificación ::before y ::after incorrecta? ¿Es incorrecta mi definición de "contenido" de un elemento? Estoy buscando respuestas con respuestas autorizadas que expliquen lo que haría el "navegador perfecto" si fuera a implementar estos pseudo-elementos junto con etiquetas HTML de cierre automático exactamente de acuerdo con las especificaciones CSS de W3.

Edición: En cuanto a "Elementos reemplazados"

Noté una línea en la parte inferior de las Especificaciones de contenido generado que decía:

Nota. Esta especificación no define completamente la interacción de: antes y: después con elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una futura especificación.

Esto podría tener algo que ver con la respuesta. De acuerdo con esta especificación , un "elemento reemplazado" se define como:

Un elemento cuyo contenido está fuera del alcance del modelo de formato CSS, como una imagen, un documento incrustado o un applet. Por ejemplo, el contenido del elemento HTML IMG a menudo se reemplaza por la imagen que designa su atributo "src". Los elementos reemplazados a menudo tienen dimensiones intrínsecas: un ancho intrínseco, una altura intrínseca y una relación intrínseca.

No puedo encontrar una lista autorizada de elementos reemplazados en la especificación HTML, pero puedo ver fácilmente que la mayoría (o todas) las etiquetas de cierre automático se ajustan a esa definición. Tampoco estoy seguro si alguna vez se completó la "especificación futura" mencionada en la primera nota.

Answer 1

Según la especificación CSS 2.1 ,

Esta especificación no define completamente la interacción de: antes y: después con elementos reemplazados (como IMG en HTML). Esto se definirá con más detalle en una futura especificación.

Pero el borrador actual de selectores de nivel 3 solo dice

Los pseudo-elementos :: before y :: after pueden usarse para describir el contenido generado antes o después del contenido de un elemento. Se explican en CSS 2.1.

CSS 2.1 define elementos reemplazados como este:

Un elemento cuyo contenido está fuera del alcance del modelo de formato CSS, como una imagen, un documento incrustado o un applet.

El contenido de los elementos reemplazados no se considera en el modelo de representación CSS.

Según MDN ,

Los elementos reemplazados típicos son <img> , <object> , <video> o elementos de formas como <textarea> , <input> . Algunos elementos, como <audio> o <canvas> son elementos reemplazados solo en casos específicos.

Por lo tanto, el uso de :before o :after elementos reemplazados producirá resultados no confiables.