I'm experimenting with a unique effect for my links that involves making it look like the upper left corner has been bitten off. To achieve this, I am using absolute positioning of a square element with the same background color as the link itself.
While this approach works perfectly in Chrome, I'm facing an issue in Firefox where the square element remains inside the link element regardless of what I try. How can I resolve this issue?
Here's a snippet of my code:
<section style="width:100%; height:auto; display:flex; justify-content:space-between; padding:0px 75px; outline:1px solid red;">
<div style="width:48%; height:auto; display:flex; flex-direction:column; outline:1px solid red;">
<div style="width:100%; height:300px; outline:1px solid red; margin-bottom:50px; position:relative; align-self:center;">
<div style="width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:red; background-image:url(''); background-size:cover;"></div>
</div>
<a href="" style="font-size:22px; padding:10px 20px; outline:1px solid red; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">SEE OUR MENU<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; outline:1px solid red;"></span></a>
<span style="font-size:15px; color:rgba(0,0,0,0.7); font-weight:500; align-self:center; text-align:center; margin-bottom:25px;">Explore our diverse menu featuring exquisite and quality dishes.</span>
</div>