如何旋转伪元素css [英] How to rotate pseudo element css

问题描述

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

I want to recreate this icon using css pseudo elements (as a toggle indicator):

我使用 :: after，:: before 创建了必要的伪元素，并尝试使用<$ c $旋转它们c> transform：rotate（90deg）。

I have created the nececcary pseudo elements using ::after, ::before and tried to rotate them using transform: rotate(90deg).

我如何告诉他们绕自己的中心旋转？我试过 transform-origin：50％50％; 这不起作用。现在，两个伪元素都具有相同的 right：10px; ，但是它们没有放置在彼此之上，而是彼此相邻。

How can I tell them to rotate around their own center? I have tried transform-origin: 50% 50%; which does not work. Right now, both pseudo elements got the same right: 10px; but they are not placed above each other, instead they are next to each other.

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

You can check this JS FIDDLE to illustrate the problem.

推荐答案

transform-origin 可以正常工作，只是

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

a) 50% 50% (the object's center) is the default, and

b）您必须将框的内容居中。这有点棘手，因为您使用的图标不需要完整的行高。尝试添加

b) you have to center the content of the box. That's a bit tricky because the icon you use doesn't require the full line height. Try adding

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

这篇关于如何旋转伪元素css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！