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

    Liebe Grüße aus Ostfriesland
    Axel

    ZETA 18
    MAC MINI mit Parallels Desktop
    Dropbox

    • Neu
    • 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 ! :)

    Liebe Grüße aus Ostfriesland
    Axel

    ZETA 18
    MAC MINI mit Parallels Desktop
    Dropbox