HTML/CSS Externe links markieren, aber nur Textlinks

[Bububoomt]

Ich möchte allen links die Extern sind ein Icon anhängen, soweit gut:

a[href^="https://"]:after, 
a[href^="https://"]:after {
content:"\f08e";
font-family:'FontAwesome';
margin-left:5px;
margin-right:5px;
}

Aber das soll nicht der Fall sein, wenn ein Bild verlinkt ist. kann ich dass mit CSS alleine definieren?

 

[thrown-out]

meines wissens ist das leider aktuell mit css nicht möglich.

es gibt einen draft[1], der solche selektoren ermöglichen würde.
aktuell kannst du das wohl nur mit javascript lösen, jquery hat da schon was fertiges[2]



[1] https://drafts.csswg.org/selectors-4/#has-pseudo
[2] https://api.jquery.com/has-selector/

 

[apolle]

Mit HTML/CSS geht es nicht:

https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/generierter_Inhalt/content
https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoelement/before,_after

 

[Bububoomt]

Also doch mit JS dachte das ginge inzwischen doch auch mit CSS

 

[theHacker]

Du kannst mit CSS niemals "rückwärts selektieren". Wenn du "a img" schreibst, formatierst du die Bilder im Link, nicht alle Links, die ein Bild innendrin haben.

Eine reine CSS-Lösung ist aber trotzdem nicht ausgeschlossen Wenn die Links mit einer Klasse markiert sind, dann geht es auch ohne JS. Der Preis dafür is, dass du diese Markierung eben selber machen musst.

 

[Bububoomt]

Nee, sollte ja nur über css ohne zusätzlichen Aufwand sein.

Naja sagen wir mal so noch ist kein rückwärtsselektieren möglich, wer weiß, irgend wann...

Und wenn irgendwann :has funktioniert ist es ja schon mal ein Schritt in die Richtung.
Ich hab es nun mit JS gelöst.