I wrap the "different link" inside an <object> tag, so you have <a class="big-link" href="big.html">I'm a big link <object><a class="small-link" href="diff.html">I'm an inside different link</a></object></a>
this is a regular requirement where I work and I normally position things and use z-index.
Say we have an image background on a div with a I would set the div with the background to have a placeholder blank image inside the markup and style so the background image covers it and wrap the img element inside an a tag with a z-index of 0 then inside the same div have another text link and position that and give a z-index of 1...
Structurally, one link shouldn't live inside another (from a markup perspective). I'd have a container with the two links in and and just position them accordingly. This pattern is something of a regular occurrence in our projects.
I would create an absolute positioned link (z-index 1) that covers the whole container (big link) and a regular link (z-index 2).
It could make sense from a UX perspective, for example a product catalog with two buttons: Show details and Add to cart, and the complete container also linking to Show details
I definitely agree this is an inherently bad idea, but if I had to do it I'd add some unclickable space around the nested link to help with slightly inaccurate clicks/taps. A hasty example built starting from @nathansmith's version: https://codepen.io/cbirdsong/pen/ZMaLPK