当我单击li上的（active，focus）时，我想将过渡添加到li的svg中

Question

我在垂直菜单中有以下用于“ li”的代码。当我单击“ li”时，我要旋转svg，即li的子对象（而不是a。内的svg）。我需要为此编写的CSS代码是什么（不是JavaScript，仅是CSS）

<li class="sidebar-nav__item">
   <a href="#" class="sidebar-nav__link">
      <svg class="sidebar-nav__icon">
           <use xlink:href="img/sprite.svg#icon-libreoffice"></use>
      </svg>
      <span>Forms</span>
   </a>

   <svg class="sidebar-nav__icon">
           <use xlink:href="img/sprite.svg#icon-chevron-right"></use>
    </svg>
</li>

Answer 1

也许您可以使用position：absolute和display：inline-grid