如何旋转伪元素css

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

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

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

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

transform-origin工作正常,就是这样

a)50％50％(对象的中心)是默认值,和

b)你必须以盒子的内容为中心.这有点棘手,因为你使用的图标不需要整行高度.尝试添加

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