Externe Links mit CSS stylen

folder_openBlog, Webentwicklung
commentKeine Kommentare

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.

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.

Tags: , , , ,

Related Posts

Kommentar verfassen

Men├╝