pseudos en img

by kseso

HTML

<img src="http://4.bp.blogspot.com/-8hTnWlxffAM/US4Jv8kII7I/AAAAAAAAGSQ/5jljiW5VTYA/s1600/grafico-circular-css.jpg" alt="Gráfico circular puro Css: " longdesc="Captura de pantalla del gráfico circular realizado en puro css. El artículo explicativo lo puedes ver en el blog: ksesocss.blogspot.com" />
   <img src="no_imagen.jpg" alt="Gráfico circular puro Css: " longdesc="Captura de pantalla del gráfico circular realizado en puro css. El artículo explicativo lo puedes ver en el blog: ksesocss.blogspot.com"  />

CSS

* {
    margin: 0;
    padding: 0;
    position: relative;
}
html, body {height: 100%; width: auto; font-size: 1rem; font-family: monospace;}
img {
    background: none repeat scroll 0 0 #EEEEEE;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    display: inline-block;
    height: auto;
    margin: 1rem;
    max-width: 40%;
    padding: 0.5rem;
    vertical-align: middle;
}
img:after {
    content: "DESCRIPCIÓN DE LA IMAGEN NO CARGADA: " attr(longdesc);
    display: block;
    font-size: 0.9rem;
    line-height: 1.2;
}