Maison > Article > interface Web > Comment puis-je faire pivoter des pseudo-éléments en ligne ?
Transformation de pseudo-éléments en ligne
Lorsque vous traitez des pseudo-éléments contenant du contenu, leur rotation peut être délicate car les éléments en ligne n'ont généralement pas le capacité à subir des transformations. Cependant, il existe une solution simple pour surmonter cette limitation.
Application de la propriété Display
Pour activer les transformations sur les pseudo-éléments, vous devez modifier leur nature en ligne en appliquant display : bloc ou affichage : inline-block. Cela les convertira respectivement en éléments de bloc ou de bloc en ligne, les rendant réceptifs aux rotations.
Exemple :
Considérez le symbole Unicode "24B6" que vous êtes essayant de tourner. En utilisant le code suivant, vous pouvez le faire fonctionner :
<code class="css">#whatever:after { content: "B6"; display: inline-block; transform: rotate(30deg); }</code>
<code class="html"><div id="whatever">Some text</div></code>
En définissant display: inline-block pour le pseudo-élément #whatever:after, vous le convertissez en un élément inline-block, vous permettant d'appliquer la règle transform: rotate(30deg) et de faire pivoter le symbole avec succès.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!