css - 懸停文本時，下划線中的空格

Question

懸停需要在div上工作，所以我將懸停規則放到div上。 其中有一個粗體數字和文字。 如果粗體文本沒有“padding-right：1px”，則沒有問題，但使用它時，下划線在懸停時有一個空白區域。 我必須使用padding-right：1px。

注意：使用  而不是“填充右：1px”使它太遠，所以它不是一個解決方案。

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

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

我該如何解決？

Answer 1

拿這個： <b style="letter-spacing: 1px;">4</b> members而不是padding選項。 我做了一個小提琴，所以你可以看到它的工作原理： https ： //jsfiddle.net/1w31kp4o/

我希望這是你想要的。

Answer 2

Philipps解決方案很棒，可能是您當前問題的最佳解決方案。 然而，這里有一些替代方法。

border-bottom簡單方法

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

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

小提琴

---

一個更極端的方法:after

這個可能對你想要的東西有點過分，但如果你需要的話，這會提供一些靈活性。 例如，您可以通過更改bottom值以及其他內容來調整下划線的距離，例如更改下划線粗細，顏色等等...

 .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> 

小提琴

Answer 3

您可以使用精簡空間（   ）：

試試這個小提琴： https ： //jsfiddle.net/hkb60qnu/

Answer 4

這將使你。 這是對您的方法的一個小調整：

HTML

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

CSS

.member {
  display: inline-block;  
}

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

這是一個CodePen供您查看