: antes de las obras does't pseudo-clase con imágenes

He código HTML siguiente:: antes de las obras does't pseudo-clase con imágenes

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <title>:before pseudo-class and images</title> 
    <style type="text/css" media="screen"> 
     img { 
      display: block; 
      width: 640pt; 
     } 
     img:before { 
      content: "Test"; 
     } 
    </style> 
</head> 
<body> 
    <img src="http://andreygromov.name/picture/flower/flower4.jpg" alt="Ваза с цветами" /> 
</body> 
</html>

: antes no aparecerán para una imagen, pero lo hace para cualquier div.

¿Por qué?

Actualización: me encontré con esta explicación en el W3C:

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

Actualización 2:

me olvido de mencionar - i necesidad de visualizar el atributo "alt" de la imagen con CSS.

img:before { 
    display: block; 
    content: attr(alt); 
    background-color: #333; 
    /* etc. */ 
}

Fuente

2011-03-28 AntonAL

con 'div: before', es un poco como esto:' '

Testdiv content

. Con 'img: before', me imagino que es difícil definir una interpretación sensorial, porque un elemento' img' no puede contener otros elementos. – thirtydot

BTW, ¿por qué especifica el ancho de la imagen en 'pt'? Hay muy pocas razones para usar 'pt' en absoluto. – RoToRa

@RoToRa, porque las diferentes pantallas tienen una densidad de píxeles diferente. Teniendo todos los tamaños en píxeles, mi sitio web se verá diferente en diferentes pantallas. Necesito independencia de resolución. – AntonAL

Teniendo en cuenta las especificaciones que usted ha citado, creo que esto es un caso donde hay que envolver la imagen en un elemento y aplicar :before en eso.

EDIT:

Teniendo en cuenta, que el atributo alt es para el texto alternativo y, básicamente, debe conferir la misma información que la imagen hace, ¿eso no quiere decir que está duplicando la información para el usuario ?

¿Qué le parece poner la información que desea mostrar en el atributo title del elemento circundante y mostrar eso?

Ejemplo:

<style type="text/css" media="screen"> 
    .image:before { 
    content: attr(title); 
    } 
    .image img { 
    display: block; 
    width: 640pt; 
    } 
</style> 
<div class="image" title="Information here"><img ... ></div>

Fuente

2011-03-28 13:02:55 RoToRa

Ver la Actualización 2 en mi pregunta. – AntonAL

en EDITAR: necesito mostrar una imagen y una explicación debajo. Al tener el atributo "título", el usuario deberá colocar el cursor sobre el contenedor y esperar. Esto no es lo que necesito – AntonAL

Quise decir mostrar el texto 'title' con': before' en lugar del texto 'alt'. – RoToRa

: antes de las obras does't pseudo-clase con imágenes

Respuesta

Cuestiones relacionadas