• Es gibt nach dem Softwareupdate eine Reihe von Änderungen und Neuerungen in unserem Forum. Genaueres dazu findet Ihr in dieser Ankündigung. Hinweise, Kritik, Anregungen, Lob und Tadel bitte hier diskutieren.

Icons hinter externe Links mit CSS

Herr Sin

Jakob Lebel
Mitglied seit
05.01.04
Beiträge
4.854
Hallo zusammen.

Ich möchte gerne auf meiner Webseite allen externen Links via CSS ein kleines Icon dahinter hängen. Sieht man ja öfters, zB. bei Wikipedia. Das ganze mach ich bisher so:

Code:
a[href^="http://"]:not([href*="meineurl.com"]):after,
a[href^="https://"]:not([href*="meineurl.com"]):after{
    content: " " url("http://meineurl.com/external-icon-16px.png");  
}

Nun habe ich an ein paar Stellen Links zu Wikipedia. Diese sollen ein eigenes Logo bekommen. Soll ungefähr so aussehen:
Wobei [-] und [W] jeweils die Icons darstellen.

Achso: Nur CSS, kein JavaScript. Und die Links will ich nicht mit einem "rel=" Tag austatten. Geht das überhaupt?
 

Soso

Jamba
Mitglied seit
29.08.09
Beiträge
56
gib den a-tags doch verschiedene Klassen, dann kannst du sie mit der :after-Pseudoklasse selektiv ansprechen:

a --> prinzipiell kein Logo
a.normal :after --> Logo wie immer
a.besonderesIcon :after --> Logo A
a.nocheinbesonderesIcon :after --> Logo B

Wenn du die Klassen konsequent einsetzt, kannst du deinen wie beschrieben Code kürzen
 

Herr Sin

Jakob Lebel
Mitglied seit
05.01.04
Beiträge
4.854
Ich mag das mit den Klassen aber vermeiden. Hintergund:

Ich habe für einen Kunden eine Umfangreiche Webseite in Wordpress erstellt (ca. 70 Seiten in je drei Sprachen). Darin sind viele interne Links. Ein paar zeigen nach draußen. Und ein paar zu Wikipedia.

Nun möchte ich eben diese drei Links unterscheiden. Interne Links sollen bleiben wie sie sind. Externe Links bekommen einen kleinen Pfeil. Und als Ausnahme bekommen die Links zu Wikipedia ein kleines "w".

Und der Kunde soll es so einfach wie möglich habe. Er soll sich nicht um Klassen kümmern. Bin froh, dass er das mit der Überstzung sauber hin bekommt.
 

frostdiver

Thurgauer Weinapfel
Mitglied seit
19.06.12
Beiträge
1.011
So vielleicht?
HTML:
a[href^="http"]:not([href*="meine.url"]):not([href*="wikipedia"]):after {
        content: " " url("external.png")
}
a[href^="http"][href*="wikipedia"]:after {
        content: " " url("wiki.png")
}
EDIT: Oder vielleicht besser für die Wikipediaseiten direkt [href^="https://de.wikipedia.org"] oder so.
 
Zuletzt bearbeitet: