如何使CSS Hover保持当前状态

Question

这是情况。我有一个悬停效果，当项目悬停时，底线显示。

这是我当前的CSS代码：

    #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
      background:#fff!important;
     font-family:Gotham-Bold!important;
   }


   #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:after 
   { 
       background:#fff!important;
       font-family:Gotham-Bold!important;
       visibility: inherit;
       display:block;
       content: '';
       border-bottom: solid 3px #cf2734;
       transform: scaleX(0);
       transition: transform 250ms ease-in-out;
       overflow:hidden;  
   }

   #mega-menu-wrap-primary #mega-menu-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link:hover:after { transform: scaleX(1); transform-origin:   0% 50%; transition-delay: 0s; } 

仅使用纯CSS（不使用JavaScript），有没有办法将悬停状态保持在当前状态？

谢谢