CSS - Wie mit mehreren Klassen mehrere Inhalte über das content Attribut anzeigen

[Gast]

In den Pseudoklassen :after und :before lässt sich bekanntlich mit content zusätzlicher Inhalt darstellen.
Jetzt würde ich gerne 2 (oder mehr) Klassen definieren und bei jeder eine eigene Regel mit content festlegen, so dass der Inhalt von allen Regeln zu sehen ist. Immer wenn ich das probierte, wurde nur der Inhalt der letzten Regel dargestellt. Sehr blöd!

Klar, bei 2 Klassen lassen sich noch alle 4 Kombinationen aufschreiben aber bei mehreren Klassen wird es schon hässlich.

Ich nehme an das geht wirklich nicht aber fragen kostet bekanntlich nichts. :smile:


Danke & Gruß

p.s.
aus
<a href="#" class="foo bar">asd</a>
und

.foo:after {
content: "foo";
}
.bar:after {
content: "bar";
}


sollte
<a href="#" class="foo bar">asd</a> foobar
werden

[dav133]

Leider wird er dir 1) trotz der :after-Pseudoklasse den per CSS gesetzten Content immer IN den <a> und nicht dahinter stecken, sodass eher ein <a href="#" class="foo bar">asd foobar</a> draus werden würde und 2) lässt sich auf ein und dasselbe Element (unabhängig davon, ob du es per a:after und #bar:after oder zweimal mit der Klasse ansprichst) nur einmal das content-Attribut in der selben Pseudoklasse (in diesem Fall :after) anwenden - Mit :before und content:... + :after und content:... wäre es also möglich, mit zweimal :after und content:... eben nicht.

Darf man fragen, wofür du die Lösung brauchst? Das Content-Attribut gehört meiner Meinung nach strenggenommen ohnehin aus der CSS-Logik verbannt, weil da Inhalt und Design zusammenlaufen, was CSS ja eigentlich trennen wollte.

lg

[Gast]

Weil man damit dem User zeigen kann, dass ein Link auf eine externe Seite führt und ihm auch noch die Sprache anzeigen lassen kann, wenn der Link das lang attribut besitzt.

[dav133]

Weil man damit dem User zeigen kann, dass ein Link auf eine externe Seite führt und ihm auch noch die Sprache anzeigen lassen kann, wenn der Link das lang attribut besitzt.

Dann mach doch vor den Link per CSS ein "@" oder irgendwas, was auf die externe Seite hinweist und nach dem Link eine Flagge für die zu erwartende Sprache. Mit Javascript liese sich sowas ja auch prädestiniert lösen.

lg