css-Transformation funktioniert nicht für css-generierten Inhalt für :: after, :: before-Elemente

Ich bin selbst ein bisschen neugierig geworden, also habe ich ein bisschen weiter hineingeschaut. Stellt sich heraus, es funktioniert.

Nach dem Blick auf den Testfall: pseudo-transition.html

Ich bemerkte, dass das Pseudo-Element den folgenden Stil hatte: display: block .

Ändern Sie Ihre Geige, um display: inline-block und voila!

Geige

Und mit einem onLoad-Übergang:

Übergangsgeige

Neuer Stil:

Gemäß der w3-Spezifikation :

  

Ein transformierbares Element ist ein Element im HTML-Namespace, das entweder ein block-level oder ein atomares Inline-level-Element ist oder dessen 'display' -Eigenschaft zu 'table-row', 'table berechnet -row-group ',' table-header-group ',' table-footer-group ',' table-cell 'oder' table-caption '; oder ein Element im SVG-Namespace (siehe [SVG11]), das die Attribute 'transform', 'patternTransform' oder 'gradientTransform' hat.

Daher müssen Sie display: block oder display: inline-block (oder, sagen wir, display: table-row ) für Ihr Element oder Pseudo-Element angeben, damit die Transformation angewendet wird.