Проблема с абсолютно позиционированным элементом iniside link в Firefox

Question

Я пытаюсь придать своим ссылкам приятный эффект, так как они выглядят так, как будто верхний левый угол был откусан, я делаю это абсолютно позиционируя квадратный элемент с тем же цветом фона, что и у самой ссылки.

Это работает в Chrome, но по какой-то причине в Firefox квадратный элемент останется внутри элемента ссылки, несмотря ни на что, как я могу это исправить?

Мой код:

<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;">VER NUESTRA CARTA<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;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
	</div>
    <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; margin-bottom:25px; position:relative;">HACER RESERVA<span style="width:27px; height:27px; position:absolute; top:-9px; left:-9px; 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;">Contamos con una amplia terraza para poder degustar nuestra comida japonesa.</span>
	</div>
</section>

Answer 1

Работает, если вы дадите a и span a display:block.

<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; background:green; display:block; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; background:red; display:block;"></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;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
	</div>
    <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; background:green; display:block; align-self:center; overflow:visible; margin-bottom:25px; position:relative;">VER NUESTRA CARTA<span style="width:27px; height:27px; position:absolute; top:-5px; left:-5px; background-color:white; background:red; display:block;"></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;">Consulta nuestra variada carta con unos platos exquisitos y de calidad.</span>
	</div>
</section>

Answer 2

если вы установите display: table; для родительского элемента, он должен работать в Firefox