icon - css before image size
CSS: después de que el pseudo-elemento no aparece en<img>? (1)
Esta pregunta ya tiene una respuesta aquí:
Tengo una imagen que se desliza hacia arriba desde el menú cuando lo mueves. Debido a que está oculto debajo del menú, quiero darle un poco de profundidad a la parte inferior de la imagen agregando un fondo oscuro. Pensé que la mejor manera de lograr esto es usar pseudo elementos. Realmente no me importa mucho el soporte de IE ya que es un detalle tan pequeño.
Entonces, esto es lo que tengo:
.header-section .trygg-ehandel-icon {
position: absolute;
top: 45px;
right: 280px;
z-index: 0;
display: block;
// Stripped out some transition style here
}
// Here''s where the cool stuff begins!
.header-section .trygg-ehandel-icon::after {
position: absolute;
top: 0px; left: 0px;
height: 20px; width: 20px;
display: block;
content: ''.'';
z-index: -999999px;
background: red;
}
En primer lugar, no estoy seguro de si usar dos o dos puntos antes de "después". Siempre he usado uno, pero recientemente noté que las personas usan dos, así que, ¿cuál es el camino a seguir? ¡Cualquiera de los dos parece funcionar!
Puedes verlo en acción aquí: http://goo.gl/RupQa
Es el logotipo amarillo que aparece sobre el menú del encabezado. ¿Por qué no veo un cuadro rojo de 20x20 sobre la imagen? El elemento principal ( .trygg-ehandel-icon ) está en posición absoluta, por lo que el pseudo elemento debería aparecer en relación con él, ¿verdad?
He estado tratando de arreglar esto por más de una hora, ¿alguna sugerencia?
Como se responde en esta pregunta .
El uso de before y after psuedo-elements con la etiqueta img no funciona en la mayoría de los navegadores, por diseño .
Las etiquetas de imagen son etiquetas de cierre automático ( <tag /> ) porque no contienen contenido. Dado que no contienen ningún contenido, ningún contenido generado puede añadirse ( ::after ) o añadirse ( ::before ) al contenido existente.
El artículo vinculado anteriormente enumera dos soluciones alternativas. La solución CSS es muy pirata en la naturaleza, mientras que la solución jQuery es mucho más elegante, pero depende de que Javascript esté habilitado y de que se incluya la biblioteca jQuery.