Stretched link

Make any HTML element or component clickable by stretching a nested link via CSS.

Usage #

Add the .stretched-link class to a link to make its containing block (opens in new tab) clickable via a ::after pseudo element. In most cases, this means that an element with position: relative that contains a link with the .stretched-link class is clickable. Please note given how CSS position works (opens in new tab), .stretched-link cannot be mixed with most table elements. Moreover, multiple links and tap targets are not recommended with stretched links.

Cards have position: relative by default, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes. Given below is an example of a product card created with a stretched link.

Cool Neon Kicks
Cool Neon Kicks

$129 $200

Add to bag
<div class="card specific-w-300 mw-100 mx-auto">
  <img src="..." class="card-img-top" alt="..." height="240">
  <div class="card-body">
    <h5 class="card-title">Cool Neon Kicks</h5>
    <p class="card-text fs-5 d-flex align-items-center">
      <strong class="text-success-emphasis me-2">$129</strong>
      <s class="fs-6 text-body-secondary">$200</s>
    <a href="#" class="stretched-link btn btn-success btn-lg w-100">
      <i class="fa-light fa-bag-shopping me-1"></i> Add to bag

Please note, the icon being used is taken from the Font Awesome icon library (opens in new tab).

With custom components #

Most custom components do not have position: relative by default, so we need to add the .position-relative here to prevent the link from stretching outside the parent element.

Album art
Abbey Road
Listen now
<div class="position-relative d-inline-flex align-items-center">
  <div class="flex-shrink-0">
    <img src="..." alt="...">
  <div class="ms-3">
    <h5 class="m-0">Abbey Road</h5>
    <a href="#" class="stretched-link">Listen now</a>

Identifying the containing block #

If the stretched link doesn't seem to work, the containing block will probably be the cause. The following CSS properties will make an element the containing block:

  • 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)

In general, it is a good idea to stick to simple usage patterns, similar to the ones shown on this page. They are good enough to handle most (if not all) real-life UI/UX patterns.

Up next
Text truncation

Help us grow

Our main goal is to make Halfmoon the go-to framework for building websites, dashboards and tools. If you believe in our mission, consider becoming a sponsor and help us grow.

You can email us directly if you have any queries. We are always happy to answer.

Subscribe for updates

We will notify you when the framework gets a substantial update. No spam ever.

Follow us on Twitter so that you can stay updated that way.