仅在伪元素之后旋转内容

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>