cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
  <head><title>Faux block-level links</title></head>
  <body>
    <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="https://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>
    
    <p>EDIT 2015-11-02: @IschaGast came up with <a href="https://codepen.io/IschaGast/pen/Qjxpxo">an improvement to this</a>, that leverages :before so you don't need the additional link to cover the whole area. I've not tested it for full accessibility in all browsers but it looks like a solid start to an alternative implementation.</p>
  </body>
</html>


            
          
!
            
              /**
 * 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;
}

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console