CSS: Interne und externe Links unterscheiden

Letzte Aktualisierung: 19. Januar 2023 um 23:25 Uhr

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 dem Aufruf als Variable mit übergibt. Aufgefallen ist mir das bei folgendem 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?

Eine korrigierte und funktionierende Version

Nachtrag vom 19.01.2023:
Da ich gerade Echtma ein wenig umgestalte, hab ich mich auch noch einmal an die CSS für die Verlinkung gemacht. Die folgende Version setze ich nun ein und sie scheint auch fehlerfrei zu funktionieren (aktiven externen Link hätte ich weglassen können)

/* interne Links */
a:link {
  color: #B4EEB4;
}
a:visited {
  color: #9BCD9B;
}
a:active {
  color: #8FBC8F; 
}
a:hover {
  color: #C0FF3E; 
}

/* Externe Links */
a[href^="http"]:not([href*="echtma.de"]):link {
  color: #FF6347; 
}
a[href^="http"]:not([href*="echtma.de"]):visited {
  color: #CD4F39; 
}
a[href^="http"]:not([href*="echtma.de"]):hover {
  color: #FF3030; 
}
a[href^="http"]:not([href*="echtma.de"]):active {
  color: #8B3626; 
}