CSS——悬停文本时下划线留空

Question

需要在

上实现hover效果，因此我在

上添加了hover规则。 文本中有一个粗体数字和文本。 如果粗体文本没有“padding-right:1px”，那么没有问题，但是当使用它时，下划线会在hover时出现空格。 我必须使用padding-right:1px。

注意：使用 而不是“padding-right:1px”会使间距过大，因此这不是解决方案。

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

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

我该如何修复它？

- caner taşdemir

---

你能添加一张你所看到的图片吗？ - wilsotobianco

我只看到4和members之间有一个“间隙”。这是你所指的吗？ - Chris

我现在已经添加了图片。 - caner taşdemir

Answer 1

使用这种方式：<b style="letter-spacing: 1px;">4</b> members，而不是使用填充选项。我已经创建了一个示例，以便您可以看到它的效果：https://jsfiddle.net/1w31kp4o/

希望这是您想要的。

- Philipp

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>

fiddle

---

使用: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>

fiddle

- Chris

Answer 3

你可以使用细间距 ( )：

尝试这个 fiddle：https://jsfiddle.net/hkb60qnu/

- J S

Answer 4

这会为您解决问题。这只是对您的方法进行了小调整： HTML

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

CSS

.member {
  display: inline-block;  
}

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

这里有一个 CodePen，你可以看一下

- wilsotobianco