Zeichen für externe Links aus CSS

  • Hallo, :) Da hatte ich doch glatt vor, vor die Linkadresse

    das/ein Symbol zu setzen, was den externen Link anzeigt.

    Ich habe da auch was in ZETA SUPPORT gefunden, allerdings ergibt das bei mir

    ein Heidendurcheinander, von der Anordnung des Link-Symbols her.

    Teilweise doppelt angeordnet, oder wenn der Linktext inmitten des

    Textes ist, wird kein Abstand zum folgenden Text eingehalten.

    Zum Beispiel hier, bei den externen Links

    Die Idee... FOTO W in Emden www.fotow.de
    Passbilder - Bewerbungsfotos - Digitalsierungen von Videos und Schmalfilmen - Fotofilme - Filmentwicklung
    www.fotow.de

    Oder hier: https://www.fotow.de/fotow-emd…s-und-download-tipps.html

    Und bei den Bildern zum Thema, die auch verlinkt sind, wird das Zeichen des externen Links auch daneben gesetzt.

    Auch nicht so schick ;)
    Irgend etwas mache ich wohl falsch?
    Beste Grüße Axel


    Das hatte ich im Forum gefunden:

    <style>

    /* Linksymbol */

    a[href ^='https://'], a[href ^='http://'] {

    position: relative;

    }

    a[href ^='https://']:before, a[href ^='http://']:before {

    position: absolute;

    font-family: 'FontAwesome';

    bottom: -2px;

    right: -20px;

    content: "\f08e";

    }


    Beste Grüße

    Axel

    • Offizieller Beitrag

    Hallo Axel,


    der CSS Code ist nicht ganz ideal, hier wäre meine Lösung dafür:


    Code
    <style>
    /* Linksymbol */
    a[href ^='https://']:not(a:has(>img))::after, a[href ^='http://']:not(a:has(>img))::after {
        font-family: 'FontAwesome';
        content: "\f08e";
        margin-left: 0.5em;
    }
    </style>

    Die doppelten Symbol entstehen dadurch, dass es sich bei dem Link zwar scheinbar um nur eine Link handelt, es aber tatsächlich zwei Links nebeneinander sind.

  • Hallo Axel,


    der CSS Code ist nicht ganz ideal, hier wäre meine Lösung dafür:


    Code
    <style>
    /* Linksymbol */
    a[href ^='https://']:not(a:has(>img))::after, a[href ^='http://']:not(a:has(>img))::after {
        font-family: 'FontAwesome';
        content: "\f08e";
        margin-left: 0.5em;
    }
    </style>

    Die doppelten Symbol entstehen dadurch, dass es sich bei dem Link zwar scheinbar um nur eine Link handelt, es aber tatsächlich zwei Links nebeneinander sind.

    Passt super... DAAAANKE ! :)

  • Hallo :) Wir hatten ja schon mal das CSS angepasst, für das Zeichen zum Externen Link.
    Aber leider wird dieses Zeichen noch immer so dann und wann angezeigt, hier, zum Beispiel,

    beim Widget zum WhatsApp.

    <style>

    /* Linksymbol */

    a[href ^='https://']:not(a:has(>img))::after, a[href ^='http://']:not(a:has(>img))::after {

    font-family: 'FontAwesome';

    content: "\f08e";

    margin-left: 0.5em;

    }

    </style>