Web designer utilizzano spesso i CSS per posizionare piccole icone dopo alcuni tipi di collegamenti. Queste icone forniscono all'utente ulteriori informazioni sul collegamento. Ad esempio, l'icona potrebbe avvisare l'utente che il collegamento è di aa file PDF, o ad un programma di posta elettronica, oppure ad un sito esterno al sito corrente. Ecco come seguire un collegamento con un'icona.

istruzione

1 Questa tecnica utilizza il CSS: dopo pseudo-classe. Funziona in conformi agli standard browser.

2 Per questo esempio, si supponga che l'icona verrà utilizzato per indicare che il collegamento è un file PDF. L'icona verrà definito nel CSS in una classe denominata .pdf.

3 Il selettore CSS è a.pdf: dopo. Questo si traduce in A (un collegamento ipertestuale) della .PDF classe e la pseudo-classe: dopo.

La regola CSS sarebbe
a.pdf: dopo {
contenuti: url (pdficon.gif);
}

È necessario disporre di un'icona di nome pdficon.gif alla url data.

4 Per fare quel lavoro, aggiungere la classe al codice HTML. Il collegamento sarà simile
a class = href "pdf" = "somefile.pdf" (tra parentesi HTML, naturalmente). Qualsiasi Un collegamento della classe chiamata pdf otterrebbe l'icona definita nella regola CSS posto dopo il link.

Potrebbe essere necessario creare una regola di stile aggiuntivo per il a.pdf: dopo il selettore, creando la quantità necessaria di spazio dopo il link in modo che l'icona non appare in cima alla parola successiva. Questo potrebbe essere fatto con padding-right. La larghezza si consente di ciò dipende dalla larghezza dell'icona.

Consigli e avvertenze

• C'è anche una: prima pseudo-classe che genera contenuto prima di un elemento.
• Internet Explorer per Windows non implementa il: dopo pseudo-classe. Questa tecnica non funzionerà su IE7 / Win e al di sotto. Ci si aspetta di essere attuato in IE8 / Win.