Поворот только содержимого после псевдоэлемента

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>