Agregar icono a los enlaces con CSS

Parto diciendo para los amantes de las validaciones, que esto aunque parezca que no valida, si lo hace :D

Es una técnica muy usada y que tiene múltiples alternativas, pero que yo realmente solo uso para mostrar a los usuarios si el enlace se abre en la misma pestaña o ventana que estamos visitando, o no.

La forma de trabajarlo es la siguiente:

elemento[atributo=""(X)valor]"" { estilos; }

donde (X) puede tomar los valores de $ y ^ para señalar que el atributo debe terminar o empezar respectivamente por ese valor .

Entonces si aplicamos lo de arriba, para colocar un icono al lado izquierdo de un enlace con destino en una nueva pestaña o ventana, el código sería el siguiente

a[target="_blank"] {

background: url('http://bligoo.com/media/users/1/52024/images/blank.gif') left center no-repeat;
padding-left: 18px;
}

ahora otra alternativa buena es mostrar si los enlaces nos dirigen a otra página...

y eso lo hacemos de este modo...

a[href^="http"] {
background:url(ahi/ustedes/colocan/la _imagen.algo) no-repeat left top;
padding-left: 10px;
}

a[href^="http://www.sitio.bligoo.com"][href^="http://sitio.bligoo.com/"] {
background-image: none;
padding-left: 0;
}

Ahora el problema que le veo a esto, es que las imágenes con vínculos a otras paginas también tendrían el iconito, pero se puede solucionar agregándole una clase a ese enlace, por ejemplo:

<href="#" class="imagen"><img src=""imagen.jpg"" /></a>

De modo que agregaríamos también

a.imagen {

background-image: none;
padding-left: 0;

}

Pero esto nos obliga a cada vez que enlacemos una imagen agregarle el atributo class="imagen"... por lo tanto yo me quedo solo con el primero.

Por ultimo, les informo que esta técnica solo funciona en los mejores navegadores, es decir, de IE6 para abajo, simplemente lo ignorará.

Ejemplo: Fabbianz.com