如何旋转伪元素css

Question

我想使用css伪元素（作为切换指示符）重新创建此图标：

我使用::after, ::before创建了nececcary伪元素，并尝试使用transform: rotate(90deg)旋转它们。

我如何告诉他们围绕自己的中心轮换？我尝试了transform-origin: 50% 50%;这不起作用。现在，两个伪元素都有相同的right: 10px;，但它们并没有放在彼此之上，而是彼此相邻。

您可以查看此JS FIDDLE来说明问题。

Answer 1

首先，您可以使用:before和:after伪元素，并创建这样的形状DEMO

之后，您可以旋转45deg的父元素并获得所需的结果。

＆＃13;

＆＃13;

.el {
  margin: 50px;
  position: relative;
  transform: rotate(45deg);
  display: inline-block;
}
.el:before,
.el:after {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
}
.el:before {
  border-top: 4px solid black;
  border-left: 4px solid black;
  top: -10px;
  left: -10px;
}
.el:after {
  border-bottom: 4px solid black;
  border-right: 4px solid black;
  top: 10px;
  left: 10px;
}

＆＃13;

<div class="el"></div>

＆＃13;

＆＃13;

＆＃13;

更新：您还可以在此:hover上添加一些转换

＆＃13;

＆＃13;

.el {
  margin: 50px;
  position: relative;
  transform: rotate(45deg);
  display: inline-block;
  cursor: pointer;
}
.el:before,
.el:after {
  content: '';
  width: 30px;
  height: 30px;
  position: absolute;
  transition: all 0.3s ease-in;
}
.el:before {
  border-top: 4px solid black;
  border-left: 4px solid black;
  top: -10px;
  left: -10px;
}
.el:after {
  border-bottom: 4px solid black;
  border-right: 4px solid black;
  top: 10px;
  left: 10px;
}
.el:hover:before {
  top: -15px;
  left: -15px;
}
.el:hover:after {
  top: 15px;
  left: 15px;
}

＆＃13;

<div class="el"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

transform-origin工作正常，只是

a）50％50％（对象的中心）是默认值，

b）你必须将盒子的内容集中在一起。这有点棘手，因为你使用的图标并不需要整行高度。尝试添加

::before, ::after {
  padding-bottom: .17em;
}

Answer 3

在right: 0;

之后修改#pseudo ::的样式

#div {
  background: blue;
  width: 80px;
  height: 80px;
  transform: rotate(45deg);
}

/* tested but not working */
#pseudo::after,
#pseudo::before {
  /* transform-origin: 50% 50%; */
}


#pseudo::after {
  content: '›';
  font-size: 50px;
  color: green;
  right: 0;
  position: absolute;
  transform: rotate(90deg);
  top: 40px;
}

#pseudo::before {
  content: '›';
  font-size: 50px;
  position: absolute;
  color: green;
  right: 10px;
  top: 10px;
  transform: rotate(-90deg);
}

<div id="div"></div>

<div id="pseudo"></div>