Search code examples
htmlcsshref

Can't click a href tag link

i have an html structure which act like sidebar menu:

<div class="sidebar sidebar-main">
   <div class="wk-seller">
      <div class="section">
         <a class="store-name" href="https://booyaa.id/marketplace/seller/feedback/shop/adityathevendor">
         Penilaian                      </a>
      </div>
      <div class="section">
         <a class="store-name" href="https://booyaa.id/marketplace/seller/profile/shop/adityathevendor#return-policy">
         Return Policy                          </a>
      </div>
      <div class="section">
         <a class="store-name" href="https://booyaa.id/marketplace/seller/profile/shop/adityathevendor#shipping-policy">
         Kebijakan Pengiriman                           </a>
      </div>
   </div>
</div>

the problem is i add the pseudoelement style to the sidebar-main like this:

.sidebar.sidebar-main:before {
    content: '';
    position: absolute;
    left: 0;
    right: 22px;
    border: solid 1px #dae2e6;
    top: 0;
    bottom: 0;
    border-radius: 2px;
}

it makes the a href tag inside this html structure not clickable, how can i fix this?

Solution

  • You have a pseudo element .sidebar.sidebar-main::before covering the area. If you really need that pseudo element, make sure you add pointer-events: none; to its CSS to make it click-through.

    enter image description here