How to rotate pseudo element css
<p>I want to recreate this icon using css pseudo elements (as a toggle indicator):</p>

<p><a href="https://i.stack.imgur.com/uKyZY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uKyZY.png" alt="enter image description here"></a></p>

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

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

<p>You can check this <a href="https://jsfiddle.net/w46rgrss/1/" rel="nofollow noreferrer"><strong>JS FIDDLE</strong></a> to illustrate the problem.</p>