CODEWITHSUNDEEP
htmlcss
caner taşdemir
caner taşdemir

Reputation: 203

css - On hover text, empty space in underline

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.

enter image description here

.member:hover {
  text-decoration: underline;
}
<div class="member">
  <b style="padding-right:1px">4</b> members
</div>

How can I fix it ?

Upvotes: 3

Views: 1485

Answers (4)

Chris
Chris

Reputation: 59511

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

Upvotes: 2

wilsotobianco
wilsotobianco

Reputation: 1558

This will make it for you. It is a small tweak to your approach:

HTML

<div class="member">
  <b>4</b> members
</div>

CSS

.member {
  display: inline-block;  
}

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

Here's a CodePen for you to take a look

Upvotes: 1

J S
J S

Reputation: 1198

You can use thin space (&#8201;):

Try this fiddle: https://jsfiddle.net/hkb60qnu/

Upvotes: 1

Philipp
Philipp

Reputation: 198

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.

Upvotes: 4

Related Questions