通过div点击链接：之前

Question

我想在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中有多个链接，但由于：在css文件之前，我无法点击它。正如你所看到的，我尝试了指针事件，但这没有帮助。

我需要：在div之前（据我所知），因为我想制作一个双线边框。 #main上的边框略大于：之前的边框，这使它成为双线边框。