Icons hinter externe Links mit CSS

[Herr Sin]

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:

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:

• www.meineurl.com/interner/link.html
  
• www.externerlink.de [-]
  
• www.wikipedia.de/irgendwas [W]

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]

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]

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]

So vielleicht?

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.

 

[Herr Sin]

Habe das mal hier zusammen gefasst:

https://codepen.io/anon/pen/rwZPvY?editors=1100

Leider klappt das noch nicht ganz. Das " a" und " b" im content ist nur drin, weil ich (hier in CodePen) nicht Icons einbinden wollte, aber trotzdem einen Unterschied erkennen wollte.

 

[frostdiver]

Zeile 4 hat 2 Fehler. Space vor :after und ^ statt *

 

[Herr Sin]

Yeah! You made my day... ohmph.... night.