WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

Wie man Links extra markiert

von | Jul 11, 2014 | Technik | 0 Kommentare

Schlagwörter: CSS - CSS3

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:
link-out

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.





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert