CSS: Interne und externe Links unterscheiden

Letzte Aktualisierung: 14. Oktober 2022 um 08:42 Uhr von Madekozu

Was mir auf meiner Seite immer wieder wichtig ist – ich will interne und externe Links auf den ersten Blick unterscheiden können. Was gibt es da besseres, als Ampelfarben? Grün = intern = alles gut – Rot = extern = Vorsicht, da hab ich keine Kontrolle drüber.

Um das Ganze umzusetzen braucht man nur ein paar Zeilen CSS (hier als Beispiel der Teil von echtma.de):

/* Externer link */
a[href^="http://" i]:not([href*="echtma.de" i]),
a[href^="https://" i]:not([href*="echtma.de" i]){
	color: #FE2E2E;
    text-decoration: underline;
    text-decoration-style: dotted;

}

/* Interner link */
a[href*="echtma.de" i],a:not([href^="http://" i]):not([href^="https://" i]){
	color: #088A29;
    text-decoration: underline;
    text-decoration-style: dotted;
}

In den meisten Fällen funktioniert die Erkennung fehlerfrei. Durcheinander kommt es nur, wenn man auf eine externe Seite verlinkt und die eigene URL bei den Aufruf als Variable mit übergibt. Aufgefallen ist mir das bei folgenden Link:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fechtma.de%2F

Hier sind natürlich alle definierten Voraussetzungen für einen internen Link vorhanden. Da man solche Verlinkungen aber eher selten hat, ist das eigentlich zu verschmerzen.

Ich hab aber noch ein kleines Problem, welches mich doch ein wenig mehr stört. Nach dem CSS-Code da oben, hab ich noch einen ganz normalen Code für Link-Hover dabei.

a:hover {
	text-decoration: underline;
	color: #68962E;
}

Was ich nicht verstehe – bei den internen Links funktioniert das auch, aber bei den externen Links nicht. Falls hier jemand drüber stolpert, der da bissel Ahnung hat, hast Du vielleicht einen Tipp für mich?

Schreibe einen Kommentar