html - Can I have a non-clickable section of a link? -

hopefully simple enough, in below example want blue section of link clickable (as link) red section not be. planning subscribe red section's onclick event after javascript.

spent hour on , getting nowhere! know how this?

.outer{      width:300px;      height:50px;      background-color:blue;      position:relative;      display:block;      color:white;      z-index:1;  }    .inner{      width:150px;      height:25px;      background-color:red;      top:0;      right:0;      position:absolute;      pointer-events:none;      z-index:2;  }

<a href="http://google.co.uk" class="outer">      clickable      <div class="inner">          not clickable      </div>  </a>

i thought inner div having higher z-index , no pointer events it, doesn't seem work.

anybody have ideas?

instead of hacking html that, bad practice. why not:

.outer {    background-color: red;    display: inline-block;  }    .inner {    background-color: blue;    width: 300px;    display: inline-block;  }    span {    display: inline-block;  }

<div class="inner">    <a href="http://google.co.uk" class="outer">clickable</a>    <span>not clickable</span>  </div>