Pseudo-Element :after überschreiben

[Dr.House]

Hallo,

ich habe ein Pseudoelement :after, in dem eine "background" Farbe gesetzt wird und möchte, dass der Anwender per CMS die Farbe selbst über einen Farbwähler bestimmen kann.

Ich habe nur folgenden Weg gefunden, der aber von den meisten Browsern noch nicht unterstützt wird:

  
  
.foo:after {background:attr(data-color)}  
  

  
  
<div class="foo" data-color="#696969">...</div>  
  

Kann ich irgendwie mit style="" die Pseudo-Klasse selektieren, oder bleibt nur der Javascript-Weg? Auf :after möchte ich nicht verzichten, dahinter steckt ein kompliziertes Konstrukt.

Danke!

[molily]

Hallo!

das ist ohne JavaScript m.W. nicht robust möglich. Inline-Styles können nicht Styles für :after setzen.

Ob du diese Funktionalität von JavaScript abhängig machen willst, kannst nur du beurteilen.

Grüße,
Mathias

[Gunnar Bittersmann]

@@Dr.House:

nuqneH

ich habe ein Pseudoelement :after, in dem eine "background" Farbe gesetzt wird und möchte, dass der Anwender per CMS die Farbe selbst über einen Farbwähler bestimmen kann.

In welchem Teil von '.foo' soll der Hintergrund zu sehen sein? Vielleicht gibt es ja einen anderen Weg als über ein Pseudo-Element?

Kann ich irgendwie mit style="" die Pseudo-Klasse selektieren

Pseudo-Element. Eben hattest du’s noch richtig.

In CSS3-Syntax werden Pseudo-Elemente und Pseudoklassen unterschieden: Pseudoklassen ein Doppelpunkt (z.B. :hover, :focus), Pseudo-Elemente zwei (z.B. ::after).

Qapla'