madekozu.de

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?

Nachtrag vom 19.01.2023:
Da ich gerade echtma.de 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 eigentlich 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;
}