I have come across two methods for extending a link over a card, container, div, or any other element in order to make the entire area clickable.
The first approach involves positioning the <a> tag as an absolute element.
The second method keeps the <a> tag as is and inserts an absolute span tag inside it, causing the a element to expand and fill the container.
Is there a specific advantage of one method over the other?
.card {
height: 100px;
background: green;
position: relative;
margin-bottom: 50px;
}
.absolute-a, .absolute-span {
padding: 10px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}<div class="card">
<a href="#" class="absolute-a">
Using absolute on anchor
</a>
</div>
<div class="card">
<a href="#">
<span class="absolute-span">
Using absolute span
</span>
</a>
</div>