Make link around text smaller – so only the middle part of the text is clickable

Question

I have some normal text links:

        <a href="projects.html">Projects</a>

Is it possible for only the middle of the letters to be clickable? i.e. not the top of the P or the bottom of the j?

a { 
font-size: 50px;
background-color: yellow;
display: inline-block;
height: 25px;
}

This makes the yellow blackground have a height of 25px but it doesn't make any difference to the clickable area. All of the text is still clickable.

See https://jsfiddle.net/m4g2b7tu/

a {
  font-size: 50px;
  background-color: yellow;
  display: inline-block;
  height: 25px;
}

<a href="projects.html">Projects</a>

Can you explain *why* you want to do this? It doesn’t make any sense to do this, so it sounds like an [XY problem](http://xyproblem.info/) i.e. you are trying to fix the symptoms of another problem. — FluffyKitten, Aug 26 '20 at 12:14
@MaxiGui line-height only changes the height of the background color, not the height of the clickable area — user2991837, Aug 26 '20 at 12:16
@FluffyKitten Very perceptive! I'm still trying to find a solution to this question:https://stackoverflow.com/questions/63493930/links-inside-list-items-have-a-height-greater-than-the-list-element-whats-goi/63494139?noredirect=1#comment112276870_63494139 — user2991837, Aug 26 '20 at 12:18
OK, yes this is being caused by the display type in the code in your other question. It is better to fix the underlying problem rather than trying to add a "hack" to work around it. Take a look at my updated answer on that question, this should fix the main problem which I believe is the `inline` property of the a links & let me know if that works! — FluffyKitten, Aug 26 '20 at 17:43

G-Cyrillus · Answer 1 · 2020-08-26T12:36:16.290

You could use pointer-events and a pseudo element to set your clickable area : https://jsfiddle.net/psvre3t0/

a { 
font-size: 50px;
background-color: yellow;
display: inline-block;
height: 25px;

/* update */
position:relative;
pointer-events:none;
}
a:after  {
  content:'';
  position:absolute;
  /* select area where to be layed */
  width:100%;
  height:50%;
  left:0;
  top:75%;
  /*reset pointer-events */
  pointer-events:auto;
  /* optionnal but makes sure it is on top */
  z-index:1;
  
  /* debug , give it a background to see where it stands 
  background:gray;
  */
}

/* demo */
a+a:hover:after {background:#0008}

<a href="projects.html">Projects</a> <a href="">Test me too</a>

Thank you. Looks outside my comfort zone, but I'll give it a go. — user2991837, Aug 26 '20 at 13:08

Make link around text smaller – so only the middle part of the text is clickable

1 Answers1