Wie kann ich Inline-Pseudoelemente drehen?

Transformieren von Inline-Pseudoelementen

Beim Umgang mit Pseudoelementen, die Inhalte enthalten, kann deren Rotation schwierig sein, da Inline-Elementen dies normalerweise fehlt Fähigkeit, Transformationen zu durchlaufen. Es gibt jedoch eine einfache Lösung, um diese Einschränkung zu überwinden.

Anzeigeeigenschaft anwenden

Um Transformationen für Pseudoelemente zu ermöglichen, müssen Sie deren Inline-Charakter durch Anwenden der Anzeige ändern : Block oder Anzeige: Inline-Block. Dadurch werden sie in Block- bzw. Inline-Block-Elemente umgewandelt, wodurch sie für Rotationen empfänglich werden.

Beispiel:

Bedenken Sie das Unicode-Symbol „24B6“. versuche zu rotieren. Mit dem folgenden Code können Sie dafür sorgen, dass es funktioniert:

<code class="css">#whatever:after {
  content: "B6";
  display: inline-block;
  transform: rotate(30deg);
}</code>

<code class="html"><div id="whatever">Some text</div></code>

Indem Sie display: inline-block für das #whatever:after-Pseudoelement festlegen, konvertieren Sie es in ein Inline-Block-Element. So können Sie die Regel „Transformation: Rotieren (30 Grad)“ anwenden und das Symbol erfolgreich drehen.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline-Pseudoelemente drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!