如何旋转伪元素css

Question

我想使用css伪元素(作为切换指示符)重新创建此图标:

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

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

您可以检查此JS FIDDLE来说明问题.

Answer 1

首先,你可以使用:before和:after伪元素,并创建像这个DEMO的形状

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

.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;
}

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

更新:您还可以:hover像这样添加一些转换

.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;
}

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