Icons hinter externe Links mit CSS

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Herr Sin, 05.07.17.

  1. Herr Sin

    Herr Sin Jakob Lebel

    Dabei seit:
    05.01.04
    Beiträge:
    4.848
    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?
     
  2. Soso

    Soso Jamba

    Dabei 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
     
  3. Herr Sin

    Herr Sin Jakob Lebel

    Dabei seit:
    05.01.04
    Beiträge:
    4.848
    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.
     
  4. frostdiver

    frostdiver Pomme Etrangle

    Dabei seit:
    19.06.12
    Beiträge:
    910
    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.
     
    #4 frostdiver, 07.07.17
    Zuletzt bearbeitet: 07.07.17
  5. Herr Sin

    Herr Sin Jakob Lebel

    Dabei seit:
    05.01.04
    Beiträge:
    4.848
    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.
     
  6. frostdiver

    frostdiver Pomme Etrangle

    Dabei seit:
    19.06.12
    Beiträge:
    910
    Zeile 4 hat 2 Fehler. Space vor :after und ^ statt *
     
    Herr Sin gefällt das.
  7. Herr Sin

    Herr Sin Jakob Lebel

    Dabei seit:
    05.01.04
    Beiträge:
    4.848
    Yeah! You made my day... ohmph.... night.
     
    frostdiver gefällt das.