Stretched Link ^commun

Il est possible en CSS d'étendre un lien avec l'utilisation de cette technique :
Le lien à étendre doit avoir la classe .stretched-link.
Le conteneur doit avoir la propriété position:relative.

Cette technique ne fonctionne pas avec les tableaux.

Dans cet exemple, le lien sur le bouton principal s'étend à l'ensemble de la card (le lien s'étend jusqu'au premier parent qui dispose de la propriété position:relative;).

<div class="card" style="width: 18rem;">
    <img src="data/common/img/visual.jpg" class="card-img-top" alt="..." loading="lazy">
    <div class="card-body">
        <h5 class="card-title">Card with stretched link</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
        <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
    </div>
</div>

<div class="d-flex position-relative mb-4">
    <img src="data/common/img/visual.jpg" class="flex-shrink-0 me-3" alt="..." loading="lazy" style="width:200px; height:auto;">
    <div>
        <h5 class="mt-0">Custom component with stretched link</h5>
        <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we’re using it here to give the component a bit of body and size.</p>
        <a href="#" class="stretched-link">Go somewhere</a>
    </div>
</div>

<div class="row g-0 bg-body-secondary position-relative">
    <div class="col-md-6 mb-md-0 p-md-4">
        <img src="data/common/img/visual.jpg" loading="lazy" class="w-100" alt="...">
    </div>
    <div class="col-md-6 p-4 ps-md-0">
        <h5 class="mt-0">Columns with stretched link</h5>
        <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we’re using it here to give the component a bit of body and size.</p>
        <a href="#" class="stretched-link">Go somewhere</a>
    </div>
</div>