I would like to click through a :before div. This is my code:
/*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>
As you can see, there are multiple links in the div, but because of the :before in the css file, i can't click on it. As you can see, I tried pointer-events but that didn't help.
I need the :before div (as far as i know) because i want to make a double-lined border. The border on #main is slightly larger than the border on the :before, which makes it a double lined border.
