CSS-Klassen für externe Links
Habt ihr euch schon einmal gefragt, wie manche Websites es hinbekommen, dass hinter externen Links oder Links die im neuen Fenster geöffnet werden, ein Symbol bzw. Icon angezeigt wird?
Auch hier ist das der Fall, beispielsweise wenn ich auf Google verlinke. Ich persönlich nutzte Font Awesome für das Icon, doch im Grunde kann auch jedes beliebige Bild verwendet werden, genau wie nahezu jeder CSS-Befehl.
Hier erfährst du wie du font awesome lokal installierst!
Doch wie lassen sich externe Links mit CSS genau stylen und was gibt es dort für Möglichkeiten? Wie immer ist das Ganze im Grunde sehr einfach, wenn man denn weiß wie. Hier also mal ein kurzes und direkt für den Einsatz geeignetes Snippet, welches dafür sorgt, dass externe Links bzw. Links die im neuen Fenster geöffnet werden, eine eigene CSS-Klasse erhalten und dementsprechend frei gestaltet werden können.
Links mit externer URL anpassen
Füge den folgenden Code in deine CSS-Datei ein und ersetzte die URL mit deiner eigenen:
a[href^="http://"]:not([href*="fastwp.de"]):after,a[href^="https://"]:not([href*="fastwp.de"]):after{font-family:FontAwesome;font-size:10px;content:"\f08e"}Code-Sprache: CSS (css)Links die target=”_blank” enthalten anpassen
Füge folgenden Code in deine CSS-Datei ein:
a[target="_blank"]:after{font-family:FontAwesome;font-size:10px;content:" \f08e"}Code-Sprache: CSS (css)Hübsche Links mit CSS
Die oberen zwei Snippets sind absolute Grundlagen. Dementsprechend müsst ihr den dort enthaltenen CSS-Code erst einmal anpassen, denn in seiner jetzigen Form funktioniert nur mit eingebunder Font Awesome. Das geschieht ganz nach euren Belieben. Ihr könnt, wie ich auch, Font Awesome Icons nutzen, oder das ganze mit eigenen Bildern im Background, doppelten Border, sowie ähnlichen Anpassungen erkennbar machen.
Die Lösung via CSS ist sauber und performant, funktioniert in allen modernen Browsern. Wenn eure User also schon vorher sehen sollen, ob ein Link extern ist oder im neuen Fenster geöffnet wird, sind die Snippets oben einfach ideal. Besucher werden es euch danken, denn mich persönlich ärgert es immer, wenn Links einfach im neuen Fenster öffnen und dies vorher nicht ersichtlich war.
