JSFiddle - React, Tailwind, and code Playground

by David_Knowles

HTML

<h1>Faux block-level links</h1>
    
    <p>Block-level links are easy - give an `a` tag display:block and off you go. Unfortunatly it all falls apart when you need to add additional links inside it, as HTML doesn't let you nest links.</p>
    
    <p>We can fake this though. Have the container be a regular div, with multiple links inside it then mark one link as the 'faux-block' link to be absolutely positioned to cover the entire container. A bit of z-index to ensure the other links sit atop of this faux link and we're done. Because users click on a regular `a` tag insead of using JavaScript events things like right click and middle click continue to work as expected. We use this technique for the <a href="http://www.bbc.co.uk/programmes/styleguide/programme-object">BBC Programmes programme object</a> so we can link to iPlayer as an image cut-out while the whole box links to the programme's main page.</p>
    
    <p>Here's a simplistic example:</p>

    <div class="highlight block-link">
      <h2>I am an example header</h2>
      <p>This entire box links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>
      
      <a class="block-link__overlay-link" href="pageone">Block link (this text isn't rendered)</a>
    </div>
  </body>
</html>

CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

/* If this block-link has child block-links then steal the positioning context from them so that their block-link covers the entire page */
.block-link--steal {
    .block-link {
        position: static;
    }
}

/* Links within the block that we want to sit on top of the overlay link */
.block-link a,
.block-link abbr[title],
.block-link__link {
    position: relative;
    z-index: 1;
}

.block-link__overlay-link {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    text-indent: 200%;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0); // IE9 fix
}


/* Increased specificity so it trumps ".block-link a" */
a.block-link__overlay-link {
    position: absolute;
    z-index: 0;
    /* this line is needed as all elements have a solid black background in high contrast mode */
    opacity: 0;
}


.highlight {
  background-color: #ddd;
}