Cómo colocar un icono Después de un Enlace

Los diseñadores web a menudo utilizan CSS para colocar iconos pequeños después de ciertos tipos de enlaces. Estos iconos proporcionan al usuario más información sobre el enlace. Por ejemplo, un icono podría alertar a un usuario que el enlace es a AA archivo PDF, o para un programa de correo electrónico, o a un sitio externo a la página web actual. Aquí es cómo acceder a un vínculo con un icono.

Instrucciones

1 Esta técnica utiliza el CSS: después de pseudo-clase. Funciona en navegadores compatibles con los estándares.

2 Para este ejemplo, supongamos que el icono se utiliza para indicar que el enlace es a un archivo PDF. El icono se define en el CSS en una clase llamada .pdf.

3 El selector CSS es a.pdf: después. Esto se traduce en un (hipervínculo) de la .PDF clase y la pseudo-clase: después.

La regla CSS sería
a.pdf: tras {
contenido: url (pdficon.gif);
}

Debe tener un icono llamado pdficon.gif en la URL dada.

4 Para hacer que el trabajo, agregar la clase al HTML. El enlace se vería
a class = href "pdf" = "SomeFile.pdf" (dentro de los paréntesis HTML, por supuesto). Cualquier Un enlace de la clase llamada pdf obtendría el icono se define en la regla CSS colocado después del enlace.

Puede que tenga que crear una regla de estilo adicional para la a.pdf: después de selector, la creación de la cantidad necesaria de espacio después del enlace para que el icono no aparece en la parte superior de la palabra siguiente. Esto se podría hacer con un poco de acolchado-derecha. La anchura permite que para esto dependerá de la anchura del icono.

Consejos y advertencias

• También hay una: antes de pseudo-clase que genera contenido antes de un elemento.
• Internet Explorer para Windows no implementa el: después de pseudo-clase. Esta técnica no funcionará en Internet Explorer 7 / Win y abajo. Se espera que sea implementado en IE8 / Win.