externe Links kenntlich machen, aber nicht URL zur eigenen Seite

  • Ich habe eine Website, auf der es wunderbar funktioniert, mit den nachfolgenden CSS-Definitionen vor jeden extern en Link ein Iconzu setzen, sodass der Besucher der Site genau weiß, dass er beim Klick auf den folgenden Link auf einer anderen Website landen wird, die evtl. seine Daten sammelt.

    Allerdings habe ich auch einige wenige Links, die unvermeidlich die gesamte URL zu einer meiner eigenen Websites beinhalten. Die sollen natürlich nicht mit dem Icon gekennzeichnet werden. Das Ganze sieht so aus:

    Code
    a[href^="https://"]:not([href*="meine-domaine-1.de"]):before, 
    a[href^="https://"]:not([href*="meine-domaine-2.de"]):before {
    content: url('/images/grafik/weblink.png');padding-right:6px;}

    Blöd nur, dass in einer weiteren Website, die ich gerade in der Entwicklung habe, genau diese CSS-Konstruktion einfach nicht funktionieren will. Da habe ich z.B. mein Signet im Kopf der Website und natürlich ist es mit der URL dieser Website verlinkt. Das lässt sich auch schlecht verhindern, weil es eine interne Funktion von YooTheme Pagebuilder ist.

    Jedenfalls steht das Icon nun störend vor dem Signet. Und manch anderer Text-Link, der aus gutem Grund ebenfalls die volle URL (mit https://.... ) hat, wird ebenfalls so markiert.

    Der obige Code ist direkt aus der funktionierenden Website heraus kopiert und hier eingefügt und genau so habe ich ihn auch in die neue Site eingefügt. Beide Sites haben die gleichen Extensions, die gleich aufgebaute htaccess usw. – Aber: Zauberei! jetzt auf der neuen Site funzt es nicht.

    Was könnte da falsch sein?

  • URL? – Mmmhh, entweder funzt der Code oder eben nicht.

    Durch Ausprobieren fand ich heraus, dass die zweite Bedingung, also die für die zweite URL die gesamte Konditionierung unwirksam macht und das Icon für externe Links dann immer angezeigt wird, sobald etwas mit kompletter URL verlinkt wird.

    Ich möchte also, dass die funktionierende CSS-Anweisung:

    Code
    a[href^="https://"]:not([href*="meine-domaine-1.de"]):before {
    content: url('/images/grafik/weblink.png');padding-right:6px;}

    durch eine zweite Regel ergänzt wird, mit der eine zweite Domain ebenfalls nicht mit einem Icon vor dem Link gekennzeichnet wird.

    Anmerkung: Ich habe schlechte Erfahrungen damit gemacht, die URL von meiner in Entwicklung befindlichen Website hier oder in anderen Foren anzugeben, weil dies offensichtlich als Einladung an ungebetene Gäste empfunden wurde. Meine URL also nur, wenn es wirklich erforderlich ist zur Klärung.

  • Mmh...als erster Gedanke käme mir, das die 2 Bedingungen sich gegenseitig aufheben.

    Die 1. Domain ist nicht die 2. und umgekehrt

    Versuch mal das:

    Code
    a[href^="https://"]:not([href*="meine-domaine-1.de"]):not([href*="meine-domaine-2.de"]):before

    Anmerkung:Die URL kannst du ja auch per PN schicken ;)