Сделайте ссылку доступной через div:before

Question

Я хотел бы кликнуть через:before div. Это мой код:

/*CSS*/
#main {
    float:left;
    width:calc(70% - 4px);
    border-width: 4px;
    border-color: black;
    border-style: solid;
    position:relative;
    text-align:center;
    left:calc(15% - 4.5px);
    margin-top:40px;
}

#main:before {
    content:"";
    display:block;
    position:absolute;
    z-index:1;
    top:-3px;
    left:-3px;
    right:-3px;
    bottom:-3px;
    border-width: 3px;
    border-color: black;
    border-style: solid;
    pointer-events: none;
}

<!--html-->     
<div id="main">
    <h3>Inhoudsopgave (sitemap)</h3>
        <ul style="text-align:left;">
            <li><a href="home.html">Home</a></li>
            <li><a href="inhoudsopgave.html">Inhoudsopgave</a></li>
            <li><a href="interviews.html">Interviews</a>
        <ul>
            <li>FC Den Bosch</li>
        </ul>
        </li>
              <li>Resultaten</li>
              <li>Conclusie</li>
        </ul>
</div>

Как видите, в div есть несколько ссылок, но из-за: before в файле css я не могу щелкнуть по нему. Как видите, я пробовал события указателя, но это не помогло.

Мне нужно:before div (насколько я знаю), потому что я хочу сделать двойную границу. Граница на #main немного больше границы на: before, что делает ее границей с двойной линией.