Block level link

Test how browser handle block level links with inline content links

by slackero

HTML

<article>
    <a href="http://example.com" target="_blank" title="Block level link" class="block-level">
        <h1>Hey, my parent is a block level link</h1>
        <p>
            And I am the content with multiple text inside.
            Can be much longer. Well, but no need now.
        </p>
        <p>
            The secon paragraph might contain another link.
            <a href="http://www.example.com/page2" target="_blank" title="Inline link">Here we go</a>. 
            Is it linking to www.example.com/page2?
        </p>
    </a>
</article>

<article>
    <a href="http://example.com" target="_blank" title="Block level link" class="block-level">
        <h1>Hey, my parent is a block level link</h1>
        <p>
            And I am the content with multiple text inside.
            Can be much longer. Well, but no need now.
        </p>
        <p>
            As we can see, it is not working as expected.
        </p>
    </a>
</article>

CSS

body {
    font-family: sans-serif;
    color: black;
    padding: 2em;
}

a {
    color: black;
}
a.block-level {
    display: block;
    text-decoration: none;
    color: purple;
}
a.block-level:hover {
    color: blue;
}
a.block-level a {
    text-decoration: underline;
}
a.block-level a:hover {
    color: green;
}