JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

Cómo usar los pseudo-elementos CSS :before y :after con imágenes en HTML

Los pseudo-elementos :before y :after que usamos constantemente en CSS no funcionan si se aplican directamente a un elemento de imagen (tipo <img>).

El motivo es que <img>, al igual algunos otros elementos "especiales" son lo que la especificación HTML denomina "elementos reemplazados". Un elemento de este tipo tiene sus dimensiones y apariencia determinados a partir de un recurso externo, en este caso una imagen.

CSS no define cómo actúan sobre los elementos reemplazados los pseudo-elementos :before y :after por lo que, por regla general, no funcionan con ellos.

Por eso, si quieres crear efectos sobre imágenes que tengan que utilizar estos pseudo-elementos la página no te hará caso.

Por ejemplo, supongamos que tenemos una imagen a la que queremos poner encima otra imagen más pequeña para destacar a la anterior, algo así:

Imagen de ejemplo con pseudo-elemento

En este ejemplo, la imagen es la fotografía de la chica, y el pseudo-elemento :before se usa colocar el iconito de "Nuevo" posicionándolo de forma absoluta.

La forma convencional de hacerlo, y que no nos funcionará, sería con un código similar a este:

#imagen{
   position:relative;
}

#imagen:before {
    content: url('nuevo.png');
    display:block;
    width: 75px;
    height:75px;
    position:absolute;
    left: 10px;
    top: 10px;
}

Si lo intentamos veremos que no funciona por el motivo que expuse al principio.

Esto, de todos modos, tiene muy fácil solución, pues basta con envolver a la imagen o elemento reemplazado en otro elemento no-reemplazado (generalmente un <div>) y aplicarle a éste el pseudo-elemento que nos interese.

Por lo tanto, para conseguir el efecto anterior sobre una imagen, lo único que tenemos que hacer es rodearla de, por ejemplo, un <div>, así:

<div id="contenedor">
    <img id="maxima" src="Maxima.jpg">
</div>

Y ahora definir el código CSS anterior sobre el contenedor, de esta manera:

#contenedor{
   position:relative; /*Establece un sistema de coordenadas para sus elementos "hijo"*/
}

#contenedor:before {
    content: url('nuevo.png');
    display:block;
    width: 75px;
    height:75px;
    position:absolute;
    left: 10px;
    top: 10px;
}

Lo que estamos haciendo es convertir al contenedor en un marco de referencia (gracias al posicionamiento relativo). Luego se "inyecta" el pseudo-elemento antes del elemento (:before) y lo posicionamos de manera absoluta para que quede colocado en la esquina superior iquierda, con cierta separación, que es lo que nos interesaba.

De esta manera solventamos la limitación de las imágenes y podemos usarlas como si fueran un elemento convencional.

Te dejo un ZIP (33,2KB) con el ejemplo anterior para que puedas examinarlo con calma.

¡Espero que te resulte útil!

José Manuel Alarcón José Manuel Alarcón
Fundador y director de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Agregar comentario