CSS3 – externe Links darstellen

Wenn du auf deiner Seite Links, die zu externen Webseiten führen, kenntlich machen möchtest, kannst du den CSS3 Attribut-Selektor dafür verwenden. Attribut-Selektoren gibt es zwar schon seit CSS level 2, neu sind aber die Zugriffsmöglichkeiten auf die Werte der Attribute mit „beginnt mit“ (^), „enthält“ (*), „endet“ ($))

a[href]:after {
content: “ \2197 EXTERN“;
font-size: 8px;
}

Zuerst wird nach allen Links mit dem Attribut „href“ gesucht und Ihnen in diesem Beispiel ein Unicode Sonderzeichen (hier Pfeil nach rechts oben) plus Text „EXTERN“ angefügt.

Im zweiten Schritt wird dann bei allen Links mit dem Attribut „href“ die mit „http://www.css3.de“ beginnen, die zusätzlichen Zeichen wieder entfernt:

a[href^=’http://www.css3.de‘]:after {
content: „“;
}

Wer weitere Webseiten von der externen Keinnzeichnung ausschliessen möchte (was ja von der Logik her eigentlich keinen Sinn macht, aber doch praktisch nötig sein könnte), fügt die Ausnahme, wie im Schritt 2 einfach an, z.B. alle URLS, die „facebook“ enthalten:

a[href*=’facebook‘]:after {
content: „“;
}

oder alle URLS, die „google“ enthalten:

a[href*=’google‘]:after {
content: „“;
}

Hier ist Kreativität gefragt, Attribute kann man unterschiedlich selektieren, hier ein paar Beispiele:

  • a[href] = Element „a“ mit dem Attribut „href“
  • a[href^=“http://“] = Element „a“ mit dem Attribut „href“ die mit „http://“ beginnen
  • a[href*=“link“] = Element „a“ mit dem Attribut „href“ die die Zeichen „link“ enthalten
  • a[href=“link“] = Element „a“ mit dem Attribut „href“ und exakt dem Wert/Inhalt „link“

Das ganze geht auch kürzer, weil machbar sind hier auch Negationen:

a[href^=“http://“]:not([href*=’www.css3.de‘]):after {
content: “ \2197 EXTERN“;
font-size: 8px;
}

Wer hier auf das Pseudo-Element :after und das Hinzufügen von Text verzichten will, kann natürlich auch eine Grafik für externe Links hinzufügen.

Vorgehensweise wie oben, erst alle Links selektieren und ihnen die Grafik zuweisen,

a[href^=’http://] {
padding-right: 10px;
background: url(image) top right;
}

dann bei den internen Links (oder auszuschliessenden Seiten) die Grafik wieder entfernen:

a[href^=’http://www.css3.de‘] {
padding-right: 0px;
background: none;
}

Ich hoffe, das Ausprobieren macht euch genauso viel Spass wie mir!

Kommentar (1)

  1. Pingback: Links zu Dateitypen optisch kenntlich machen – CSS3 Attributselektoren | CSS3.de

Kommentare sind geschlossen.