Make any HTML element or component clickable by stretching a nested link via CSS.
.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.
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.
<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> </p> <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 </a> </div> </div>
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.
<div class="position-relative d-inline-flex align-items-center"> <div class="flex-shrink-0"> <img src="..." alt="..."> </div> <div class="ms-3"> <h5 class="m-0">Abbey Road</h5> <a href="#" class="stretched-link">Listen now</a> </div> </div>
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:
positionvalue other than
perspectivevalue other than
filtervalue other than
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.
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.