How to rotate pseudo element css


Tags: css,css3,css-transforms

Problem :

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

enter image description here

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

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.

You can check this JS FIDDLE to illustrate the problem.



Solution :

transform-origin works fine, it's just that

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

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 Howto..

    API embeded code is sending