擬似要素後のコンテンツのみを回転する

Question

コンテンツのみを回転することはできますか？

div:after { 
    content: "10"; 
    background-color: fuchsia; 
    display: inline-block; 
    transform: rotate(30deg); 
    font-size: 30px; 
} 

例の画像：

Answer 1

いや、それは不可能です。しかし、あなたはそれを達成するために:beforeと:afterの両方を利用することができます

div { 
 
    position: relative; 
 
} 
 

 
div:after{ 
 
    content: "10"; 
 
    display: inline-block; 
 
    transform: rotate(30deg); 
 
    font-size: 30px; 
 
    position: absolute; 
 
    left: 10; 
 
} 
 

 
div:before{ 
 
    content: ""; 
 
    background-color: fuchsia; 
 
    display: inline-block; 
 
    height: 35px; 
 
    width: 35px; 
 
    position: absolute; 
 
    left: 10; 
 
}

<div></div>