cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

  <head><title>Faux block-level links</title></head>
    <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>
    <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>

 * 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;

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