Externe Links mit CSS stylen

In manchen Projekten kommt es vor, dass sich das Aussehen von internen Links zu externen Likns unterscheiden muss. Eventuell müssen interne Links bestimmte Kennzeichnungen haben oder externe Links mit einem bestimmten Icon versehen werden.

Viele Entwickler sind dann schnell der Auffassung, dass man hier umständliche über JavaScript oder mit CSS Klassen arbeiten muss. Tatsächlich jedoch kann man auch super simpel mit Hilfe von CSS realisieren. Dabei nutzt man einfach das href Attribut des a-Tag’s und schaut nach, ob es http/https im Link hat. Bestenfalls haben nämlich eigene Links, die keine komplette URL als Link enthalten und so aussehen: /impressum.

Anzeige

Wenn das der Fall ist, kann man CSS zum stylen nutzen:

<a href="https://local.test/">Internal Link</a>
<a href="https://wikipedia.de">Exteral Link</a>
a {
    text-align: center;
    ... default link styles 
}

/* external Links */
a[href^=http],
a[href^=https] { 
  background-color:red;
}

/* internal Links */
a[href*=local\.test],
a[href*=YourDomain\.tld] { 
  background-color:green; 
}

Beispiel:

Fazit:

Es muss also nicht immer JavaScript oder ähnliches sein.
Manchmal reicht schon einfaches CSS.

Schreibe einen Kommentar

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

Bitte füllen Sie dieses Feld aus
Bitte füllen Sie dieses Feld aus
Bitte gib eine gültige E-Mail-Adresse ein.
Sie müssen den Bedingungen zustimmen, um fortzufahren

Menü