Tengo un fragmento en react similar a este:
<div className='menu-options pt-4'>
<li>
<Link color="primary" id="appointments" className='dropdown-link' role='button' to=''>
<i className='fas fa-calendar-alt icon-danger'></i>
Turnos
<i className='fas fa-angle-right float-right pt-1'></i>
</Link>
</li>
<UncontrolledCollapse toggler="#appointments">
<li ><Link to='/profile'><i className='fas fa-address-card icon-orange ml-4'></i>Crear Turno</Link></li>
<li><Link to='/profile'><i className='fas fa-project-diagram icon-danger ml-4'></i>Bucar Turnos</Link></li>
<li><Link to='/profile'><i className='fas fa-blog icon-info ml-4' ></i>Otro Menú</Link></li>
</UncontrolledCollapse>
</ul>
</div>
Y estoy tratando de rotar el icono fa-angle-right
al abrir el dropdown con el siguiente CSS
.menu-options .dropdown-link i.fa-angle-right::before {
transform: rotate(0deg);
display: inline-block;
}
.menu-options .dropdown-link:active i.fa-angle-right::before {
transform: rotate(90deg);
display: inline-block;
}
El tema es que la clase active, como bien dice su documentacion, desaparece al soltar el click. Existe alguna pseudoclase o pseudoelemento capaz de simular un "check" en un elemento de CSS? Es decir, algo similar a que quede activado con el primer click, y se desactive con el segundo
Nota: Puedo hacer esto con JS o directamente con Hooks (de hecho ya lo hice asi y anda), pero quiero implementarlo con CSS. Alguna sugerencia?