How can you “pretend” nested links?

Photo by Ben Kolde on Unsplash

NEVER DO THIS:
<div class="card"> <a href="/parent-link" title="">Lorem ipsum dolor sit amet, per cu modo regione pertinacia, ius ei feugait repudiare argumentum. Ceteros lobortis praesent eos ex, congue apeirian tacimates ad nam.

<a href="/child-link" title="">
Has at ullum harum epicurei.
</a>
</a></div>

— Solution


DO THIS INSTEAD:
//Style Scss

.card{
position: relative;
}

.parent-link{
&:after{
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
.child-link{
position: relative;
z-index: 1;
}
//HTML Code<div class="card"> <h1>
<a href="/parent-link" class="parent-link" title="">Lorem ipsum dolor sit amet, per cu modo regione pertinacia, ius ei feugait repudiare argumentum. Ceteros lobortis praesent eos ex, congue apeirian tacimates ad nam.
</a>
</h1>
<p>
<a href="/child-link" class="child-link" title="">
Has at ullum harum epicurei.
</a>
</p>
</div>

--

--

--

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jokova

Jokova

Hello there! My name is Ioanna Vasdeki aka Jokova! I’m a passionate front-end developer </>. In my free time, I love cooking, getting outside & walking around!!

More from Medium

Why Password Managers Ignore Input Fields — trial:by:fire

The Power Of Chrome DevTools

null vs. undefined: Can I use only one?

The Front End Theory

an exploding IIIF logo