Ihr habt sicher schon öfters gesehen, dass bei anderen Webseiten hin und wieder ein Symbol neben einem Link auftaucht, der dem Leser anzeigt, dass es hier weiter geht. Vorallem Typo 3 Webseiten haben diese Funktion gerne drinn. Oft sieht man da dann dieses Symbol:

Nun möchte ich euch kurz zeigen, wie man sowas auch hier im Blog machen kann. Ich benütze dazu die Dashincons da ich diese ja auch hier schon vorgestellt habe – man kann aber auch FontAwesome nehmen.

Dann fügt man den folgenden Code im CSS ein.

1
2
3
4

a[href^="http://"]:
not([href*="chefblogger.me"]):after,a[href^="https://"]:
not([href*="chefblogger.me"]):after{font-family:dashicons;
font-size:10px;content:"f504"}

Jetzt wird jedesmal wenn ein Link „a href“ aufgerufen wird, geprüft wohin der Link führt, wenn er nicht mit der chefblogger.me URL übereinstimmt, wird das Symbol 10px gross neben dem Link angezeigt.

Man kann das Ganze natürlich jetzt auch noch erweitern, in dem man noch prüft ob es ein pdf ist oder ein andere Webseite und so jedesmal ein einanderes Symbol anzeigen lassen. Der Fantasie sind hier keine Grenzen gesetzt.

Viel Spass beim Aufpimpen eurer Links.