Hacer un botón de ‘Ver código fuente’

En muchas páginas he visto como se indica que un enlace va a abrirse en una ventana nueva con un icono que suele ser una flecha. También se suele indicar que el enlace es a una página en otro idioma mostrando la bandera del país o con un texto.

La verdad es que si tenemos que incluir la imagen en cada enlace que creamos, nos podemos volver locos, a parte de aburrirnos bastante. Una solución sencilla es mediante estilos, para ello usaremos los selectores de atributos y los pseudo-elementos.

Contaremos con dos imágenes: una para indicar un enlace externo () y otra para indicar el país (inglés en este caso ). También tendremos en cuenta que es posible que el enlace se abra en otra ventana y que sea en inglés.

Para poder realizarlo mediante estilos necesitamos el pseudo-elemento :after, el cual nos permite incluir contenido después del propio contenido del elemento, usando para ello también la propiedad content. También será necesario asignar el estilo de los elementos según sus atributos usando para ello selectores de atributos. Usaremos el atributo hreflang para indicar el idioma y si contiene el atributo target supondremos que es un enlace externo.

a[target]:after {
padding-left: 4px;
content: url(abrir.gif);
}
a[hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png);
}
a[target][hreflang="en"]:after {
padding-left: 4px;
content: url(gb.png) "  " url(abrir.gif);
}

Funciona en Firefox y en Opera, en Safari supongo que también. En nuestro amigo IE no funciona, al menos en la versión 6, si alguien me puede confirmar en Safari y en IE7, se lo agradeceré en el alma.

Ejemplo