Agregar íconos a los links con CSS3

Publicado el Viernes, 18 Mayo 2012

(Tiempo estimado: 3 - 5 minutos)

inShare1

En este artículo vamos a ver una forma de emplear los pseudo-elementos ":before" y

":after", en combinación con la propiedad content y los selectores de atributos,

para agregar un ícono a nuestros enlaces de manera selectiva, dependiendo del contenido

al que apunte el enlace. Con esto no solo podemos darle un estilo fresco al diseño del sitio,

sino que también vamos a mejorar la usabilidad del mismo ya que le evitamos sorpresas

al usuario al indicarle de antemano el tipo de contenido que está por abrir, sobre todo si se

trata de documentos de Office o archivos PDF que solicitan la descarga del mismo.

Antes vamos a repasar un par de conceptos.

Empleando los Selectores de Atributos

Para distinguir el contenido al que apuntan nuestros enlaces desde la hoja de estilos, vamos

a hacer uso de los selectores de atributos de CSS2 y de CSS3, que permiten seleccionar

elementos HTML en función de sus atributos y/o valores de esos atributos. La sintaxis CSS

para seleccionar un elemento en base al valor de un determinado atributo es la siguiente:

elemento[atributo='valor'] { Los estilos van aquí }

Esto selecciona los elementos que tienen establecido un atributo llamado

nombre_atributo con un valor igual a valor, y les aplica los estilos que definamos

para esta regla. Por ejemplo, para aplicar un color a todos los enlaces externos del sitio (los

que tengan el atributo target='_blank') lo hacemos de esta manera:

a[target='_blank'] {

color: #666;

}

El selector que usamos (=, “igual a”) está soportado desde la versión 2.1 de CSS. A partir

de CSS3 se añadieron tres nuevos selectores de atributos:

elemento[atributo^='valor'], selecciona todos los elementos que

disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto

indicada ("Begins with" selector).

elemento[atributo$='valor'], selecciona todos los elementos que

disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto

indicada ("Ends with" selector).

elemento[atributo*='valor'], selecciona todos los elementos que

disponen de ese atributo y cuyo valor contiene la cadena de texto indicada

("Contains" selector).

Con ellos podemos aplicar un estilo a un enlace que apunte a un documento con una

determinada extensión, como PDF por ejemplo, verificando que dicha extensión exista al

final del mismo, de la siguiente manera:

a[href$='.pdf'] {

color: #666;

}

Empleando los pseudo-elementos :before y :after

Existen varios pseudo-elementos en CSS, dentro de los cuales encontramos los pseudo-

elementos :before y :after, los cuales se utilizan en combinación con la propiedad

content de CCS para crear un elemento falso de contenido en insertarlo antes o después

del contenido original del elemento. Dicho contenido no se visualiza en el DOM de

nuestro HTML, pero puede recibir un estilo CSS.

Por ejemplo, el siguiente código agrega contenido al final de un párrafo:

p:before {

content: " Contenido generado mediante CSS ";

}

Modificando el CSS de nuestro sitio

Aplicando lo visto hasta el momento, vamos a emplear la técnica en nuestro sitio. La idea

es simple: si un enlace apunta, por ejemplo, a un documento con extensión PDF, vamos a

mostrar un icono PDF al final del enlace. Solo necesitamos agregar el siguiente código CSS

a nuestra hoja de estilo:

/* Muestra un icono junto a los enlaces que comienzan con 'http' */

a[href^='http']:after {

content: " " url(icon-external-link.png);

}

/* Muestra un icono junto a los enlaces que terminan con '.pdf' */

a[href$='.pdf']:after {

content: " " url(icon-pdf.png);

}

/* Muestra un icono junto a los enlaces que terminan con '.doc' */

a[href$='.doc']:after {

content: " " url(icon-doc.png);

}

/* Muestra un icono junto a los enlaces que terminan con '.xls' */

a[href$='.xls']:after {

content: " " url(icon-xls.png);

}

/* Muestra un icono en los enlaces que comienzan con 'mailto' */

a[href^='mailto']:after {

content: " " url(icon-mail.png);

}

Ejemplos:

Enlace normal

Enlace externo

Enlace a un documento .PDF

Enlace a un documento .DOC

Enlace a un documento .XLS

Enlace a una dirección de correo electrónico

Luego, solamente es cuestión de probar con diferentes extensiones de archivo, como

fuentes RSS, archivos .SWF o .FLV, etc.

Problema con Imágenes con enlaces

Ahora bien, puede que tengamos imágenes con un enlace a contenido externo en nuestros

artículos, o enlaces donde no queramos que se aplique ningún ícono por defecto. Para

solucionar este problema, vamos a crear una clase CSS y se la vamos a aplicar a dichos

enlaces que no queramos “iconizar”, de la siguiente manera:

.imageLink {

content: "";

}

Navegadores soportados

Podemos ver una lista de los navegadores que soportan los pseudo-elementos :before y

:after en el sitio de CSS-Tricks, que incluye las versiones iguales o superiores a Firefox

3.5, a IE 8 y a todas las versiones de Chrome.