JSFiddle - React, Tailwind, and code Playground

by angry_bender

HTML

<div class='wrapper'>

  <a class='main-link' href='http://habrahabr.ru/all/'>  </a>
   
  <a class='child-link' href='https://habrahabr.ru/company/ua-hosting/blog/275947/'>I'am a pseudo-nested link</a>
</div>

CSS

.wrapper {
  width: 400px;
  height: 150px;
  position: relative;
  background: #ddd;
}

.wrapper .main-link {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  left: 0;
  top: 0;
}

.wrapper .main-link:hover {
  background: #eee;
}

.wrapper .child-link {
  position: absolute;
  z-index; 2;
  left: 100px;
  top: 40%;
}