疑似要素のコンテンツを回転するにはどうすればよいですか?

回転による疑似要素コンテンツの変換

疑似要素は本質的にインラインであるため、コンテンツを回転しようとすると課題が生じます。インライン要素の変換は通常は実現できません。ただし、疑似要素のコンテンツ値の回転を有効にする簡単な解決策が存在します。

疑似要素に display: block または display: inline-block を割り当てることで、基本的にそれをブロックレベルまたはインラインに変換します。 -block 要素を使用すると、回転などの変換を適用できるようになります。

次のサンプル コードを考えてみましょう:

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

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

この例では、:after 疑似要素の Unicodeシンボルは、transform プロパティを使用して正常に 30 度回転されました。 display: inline-block を適用すると、擬似要素が inline-block 要素としてレンダリングされ、変換の対象になります。

以上が疑似要素のコンテンツを回転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。