Stretched Link

The .stretched-link class is used to make its parent element clickable via a ::after preudo element. Multiple stretched links within the same parent are not officiallty supported, even though in a selected number of cases, these might work.

    <div class="bg position-relative">
        <p>
            This is a place holder that is meant to make up the
            most of this element's content. You're going to be able
            to see the :hover effect here.
        </p>

        <a class="button stretched-link">Do something</a>
    </div>

If the .stretched-link does not seem to work, the containing block is most likely 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)