How can you “pretend” nested links?

It was a difficult working day for me when I realized that I wasn’t able to do a very simple thing -in the right way- after a tone of front-end development. So, after hours of strangling with this little problem, it has started to become huge in my mind. But after all, I made it and I decided to tell you how to do it simple and right, just in case you deal with the same issue.

Photo by Ben Kolde on Unsplash

I’ll start by telling you that you can NOT put an <a href=”#”> tag, inside to another <a href=”#”> tag in your HTML code! Nested a elements are forbidden.


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>

See you soon! Have fun & keep coding.

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!!

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