css - On hover text, empty space in underline

Question

The hover needs to be work on the div, so I put hover rule to the div. There is a bold number and text in it. If there is no "padding-right:1px" to the bold text, there is no problem, but when using it, the underline has an empty space on hover. I must use padding-right:1px.

Note: Using   instead of "padding-right:1px" makes it too far, so its not a solution.

.member:hover {
  text-decoration: underline;
}

<div class="member">
  <b style="padding-right:1px">4</b> members
</div>

How can I fix it ?

Answer 1

Take this: <b style="letter-spacing: 1px;">4</b> members instead of the padding option. I made a fiddle, so you can see that it works: https://jsfiddle.net/1w31kp4o/

I hope this is what you wanted.

Answer 2

Philipps solution is great, and probably the best for your current issue. Here are a few alternative approaches however.

Simple approach with border-bottom

.member:hover {
  display: inline-block;
  border-bottom: 1px solid black;
}

<div class="member">
  <b style="padding-right:1px">4</b> members
</div>

fiddle

---

A more extreme approach with :after

This one is probably a bit overkill for what you want, but this offers some flexibility if you need that. You can for example adjust the distance of the underline by changing the bottom value, as well as other things of course, such as changing the underline thickness, color, etc etc...

.member {
  display: inline-block;
  position: relative;
}
.member:hover:after {
  content: "";
  width: 100%;
  height: 1px;
  background: black;
  display: block;
  position: absolute;
  bottom: 1px;
}

<div class="member">
  <b style="padding-right:1px">4</b> members
</div>

fiddle