Stretched link

A utility that expands a link's click target to fill its positioned ancestor using a ::after pseudo-element.

@layer helpers

.stretched-link makes the containing block of a link clickable by expanding a ::after pseudo-element to cover it. The containing block must have a position value other than static. Note that .stretched-link is incompatible with most table elements due to how CSS position interacts with table layout.

Cards have position: relative by default, so .stretched-link works inside a card without additional markup changes.

Multiple stretched links in a single containing block are not recommended.

Card with stretched link

Some quick example text to build on the card title and make up the bulk of the card’s content.

Go somewhere

<div class="card" style="width: 18rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <h2 class="card-title">Card with stretched link</h2>
    <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <a href="#" class="button primary stretched-link me-auto">Go somewhere</a>
  </div>
</div>

Most custom components do not have position: relative by default. Adding .position-relative to the container establishes a new containing block for the link.

Custom component with stretched link

This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and used here to give the component a bit of body and size.

Go somewhere

<div class="d-flex position-relative">
  <img src="..." class="flex-shrink-0 me-medium" alt="...">
  <div>
    <h2 class="font-xlarge mt-0">Custom component with stretched link</h2>
    <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and used here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

The same pattern works with grid columns:

Columns with stretched link

Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and used here to give the component a bit of body and size.

Go somewhere

<div class="row g-0 bg-evident position-relative">
  <div class="medium:col-6 medium:mb-0 medium:p-large">
    <img src="..." class="w-100" alt="...">
  </div>
  <div class="medium:col-6 p-large medium:ps-0">
    <h2 class="font-xlarge mt-0">Columns with stretched link</h2>
    <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 used here to give the component a bit of body and size.</p>
    <a href="#" class="stretched-link">Go somewhere</a>
  </div>
</div>

Containing block

If a stretched link does not behave as expected, an intermediate element may be acting as the containing block. These CSS properties trigger containing block formation:

A position value other than static
A transform or perspective value other than none
A will-change value of transform or perspective
A filter value other than none or a will-change value of filter (only works on Firefox)

Card with stretched links

Some quick example text to build on the card title and make up the bulk of the card’s content.

Stretched link will not work here, because position: relative is added to the link

This stretched link will only be spread over the p-tag, because a transform is applied to it.

<div class="card" style="width: 18rem;">
  <img src="..." class="card-image-top" alt="...">
  <div class="card-body">
    <h3 class="card-title">Card with stretched links</h3>
    <p>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
    <p>
      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
    </p>
    <p class="bg-evident" style="transform: rotate(0);">
      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
    </p>
  </div>
</div>

CSS

.stretched-link positions an ::after pseudo-element over the containing block using an absolute inset and a configurable z-index.

.stretched-link {
  &::#{$stretched-link-pseudo-element} {
    position: absolute;
    inset: 0;
    z-index: $stretched-link-z-index;
    content: "";
  }
}

Sass variables

Sass variables set the pseudo-element type and z-index for the stretched link overlay.

$stretched-link-pseudo-element:           after;
$stretched-link-z-index:                  1;