Los pseudo-selectores antes y después no insertan elementos HTML - insertan texto antes o después del contenido existente del elemento de destino. Debido a que los elementos de imagen no contienen texto o tienen descendientes, ni img:before ni img:after le servirán de nada. Este es también el caso de elementos como <br> y <hr> por la misma razón.

Encontré una manera de hacer que esto funcione en css puro:

El Solo soy contenido falso -método

Un método CSS puro para habilitar img:after.

Usted puede comprobar hacia fuera el CodePen: Solo soy contenido falso o ver la fuente .

Fuente

HTML

<img
    alt="You are watching the ~ I'm just fake content ~ method"  
/>

CSS

img {
    /* hide the default image */
    height:0;
    width:0;

    /* hide fake content */
    font-size:0;
    color:transparent;

    /* enable absolute position for pseudo elements */
    position:relative;

    /* and this is just fake content */
    content:"I'm just fake content";
}

/* initial absolute position */
img:before,
img:after {
    position:absolute;
    top:0;
    left:0;    
}

/* img:before - chrome & others */
img:before {
    content:url(http://placekitten.com/g/250/250);
}

/* img:before - firefox */
body:not(:-moz-handler-blocked) img:before {
    padding:125px;
    background:url(http://placekitten.com/g/250/250) no-repeat;
}

/* img:after */
img:after {
    /* width of img:before */
    left:250px;

    content:url(http://lorempixel.com/350/200/city/1);
}

Soporte del navegador

✓ Cromo 10 +

✓ Firefox 11 +

✓ Opera 9.8 +

✓ Safari

No apoyo

Internet Internet Explorer 8 / 9

Por favor, pruebe en otros navegadores

Aquí hay otra solución que usa un contenedor div para img mientras usa :hover::after para lograr el efecto.

El HTML como sigue:

<div id=img_container><img src='' style='height:300px; width:300px;'></img></div>

El CSS como sigue:

#img_container { 
    margin:0; 
    position:relative; 
} 

#img_container:hover::after { 
    content:''; 
    display:block; 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:url(''); 
    z-index:1; 
    top:0;
} 

Para verlo en acción, echa un vistazo al violín que he creado. Solo para que sepas que esto es compatible con el navegador cruzado y no hay necesidad de engañar al código con 'contenido falso'.

Creo que la mejor manera de ver por qué esto no funciona es que :antes y :después inserte su contenido antes o después del contenido dentro de la etiqueta a la que los está aplicando. Así que funciona con divs o spans (o la mayoría de las otras etiquetas) porque puedes poner contenido dentro de ellas.

<div>
:before
Content
:after
</div>

Sin embargo, un img es una etiqueta autónoma de cierre automático, y como no tiene ninguna etiqueta de cierre separada, no puede poner nada dentro de ella. (Eso tendría que verse como <img>Content</img>, pero por supuesto que no trabajo.)

Sé que este es un tema antiguo, pero aparece primero en Google, así que espero que esto ayude a otros a aprender.

Intenté y encontré un método más simple para hacerlo. Aquí está el HTML:

    <img id="message_icon" src="messages2.png">
    <p id="empty_para"></p>

Lo que hice fue colocar una etiqueta <p> vacía después de mi etiqueta de imagen. Ahora usaré p:: before para mostrar la imagen y colocarla de acuerdo a mis necesidades. Aquí está el CSS:

#empty_para
{
    display:inline;
    font-size:40;
    background:orange;
    border:2px solid red;
    position:relative;
    top:-400px;
    left:100px;
}
#empty_para::before
{
    content: url('messages.png');
}

Pruébalo.