CODEWITHSUNDEEP
cssfrontend
Elichy
Elichy

Reputation: 558

Cursor showing under link way far

I have noticed a weird behavior in my different browsers, when i hover a text link from the bottom, the cursor start showing under the link even before hovering the text, the size of the text is 85px while the line-height is 61px.

font-size: 85px;
line-height: 61px;

is it because the text is big?! here is an example https://jsfiddle.net/rcdsqf2e/

I had to add a transparent bloc to avoid this situation, is there a better solution to make the cursor appear only the the area of the link

enter image description here

Upvotes: 0

Views: 398

Answers (1)

Dano507
Dano507

Reputation: 61

Normal Behaviour

I believe this is normal behavior. Consider this HTML:

<ul>
  <li><a href="#">Normal link</a></li>
  <li><a href="#">Ag</a></li>
</ul>

When Hovering over letters in a link, there needs to be room for letters that go below the "line" (as in the line one would write on), such the lowercase letters "g" or "y".

Potential Fix

As for how to fix your issue, I think the best way of doing so would be to use pseudo elements to change the cursor.

a {
  position: relative;
}
a::after {
  content: "";
  position: absolute;
  cursor: default;
  
  left: 0;
  bottom: -30%;
  height: 30%;
  width: 100%;
}

Better Fix

I have edited my message to share a better solution, as I was not satisfied with the one I shared before. Simply add overflow: hidden to your the "a" tags.

a {
  overflow: hidden;
}

however, this will cut off letters that go below the "writing line", as shown in the above linked example. If you wish to not cut off these letters in the future, you could either remove the overflow: hidden;, or add padding:

a {
  overflow: hidden;
  padding-bottom: 3%;
}

Upvotes: 1

Related Questions