Frage "Link auf ext. Seite"-Pfeil bei Bildern ausschalten

[mam885]

Hallo zusammen

Ich füge bei bei meiner Seite vor Links zu externen Seiten einen Pfeil hinzu, um auch optisch sichtbar zu machen, dass man mit dem Folgen des Links die Seite verlässt. Dies mache ich folgendermassen:

a[href^="http"]:before
    {
    content: "\2197";
    }

nun habe ich jedoch Links, die ein Bild beinhalten. Wie mache ich nun, dass diese Regel bei diesen Links nicht greift bzw. überschrieben wird?

Kann ich das generell für alle Bilder innerhalb von Links machen oder zumindest über eine Klasse, welche ich dann den gewünschten Links zuordne?

 

[threadi]

Du müsstest den Links, die das Bild umgeben, eine Klasse geben über die Du o.g. Einstellung überschreibst (entweder content auf "" setzen oder mit display ausblenden).

 

[MrMurphy]

Hallo,

mit einer Klasse geht das immer.

Den Text der a-Elemente könntest du auch in ein zusätzliches span packen und dem dann den Pfeil voranstellen.

Ohne eine zusätzliche Klasse oder zusätzliche Elemente kannst du die Links nur selektieren, wenn die Pfade zu den Bildern Angaben enthalten, die bei den Text-Links nicht vorkommen.

Gruss

MrMurphy

 

[mam885]

Du müsstest den Links, die das Bild umgeben, eine Klasse geben über die Du o.g. Einstellung überschreibst (entweder content auf "" setzen oder mit display ausblenden).

wie müsste das CSS für die Klasse aussehen? Ich kriege es nicht hin, dass die oben genannte Klasse überschrieben wird.

#noarrow a[href^="http"]:before
    {
    content: "\2197";
    }

und den Links die Klasse #noarrow hinzufügen?

 

[threadi]

http://www.css-lernen.net/klassen.html

 

[MrMurphy]

Hallo

Das #-Zeichen stellt eine id dar, keine Klasse. Und die Klasse, die die Pfeile erzeugen soll, noarrow zu nennen ist nicht geschickt.

Im HTML musst du den a-Elementen, denen der Pfeil vorangestellt werden soll, die Klasse für den Pfeil zuweisen. Ich habe die mal "linkarrow" genannt:

<a href="http://www.extern.de" class="linkarrow">Ferrari</a>

Die CSS-Anweisung für den Pfeil könnte dann folgendermaßen aussehen:

a.linkarrow::before {
   content: "\2197";
   margin-right: 0.5rem;
}

Gruss

MrMurphy