Make div clickable with inline-block anchor element

by hakan

HTML

<div class="first">
    <p>The first div with a repositioned span<span></span></p>
</div>

<p>Outside the divs</p>
        
<div class="second">
    <p>The second div with a repositioned span<span></span></p>
</div>

<p>Outside the divs</p>

CSS

body {
    font-family: sans-serif;
}
div {
    border: 2px solid #ccc;
    padding: 1em;
    position: relative;
    width: 60%;
}
span {
    position:absolute; 
    top: -50%;
    left: 10%;
    width: 110%;
    height: 150%;
    background-color:rgba(255,0,0,.1);    /* To make the span (semi-)visible. */
    z-index: 1;
    display: inline-block;
}
div.second p {
    transform: translatez(0);
}
div p {
    background-color: yellow;
}