Блог

Главная - Вопросы по программированию - Поворачивать только содержимое в after pseudoelement

Поворачивать только содержимое в after pseudoelement

#css

#css

Вопрос:

Можно повернуть только содержимое?

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

Пример изображения:

введите описание изображения здесь

Ответ №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>