css - 悬停文本时，下划线

Question

悬停需要在div上工作，所以我将悬停规则放到div上。 其中有一个粗体数字和文字。如果粗体文本没有“padding-right：1px”，则没有问题，但使用它时，下划线在悬停时有一个空白区域。我必须使用padding-right：1px。

注意：使用 代替“padding-right：1px”会让它太过分，所以它不是解决方案。

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

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

我该如何解决？

Answer 1

取此：catch而不是填充选项。我做了一个小提琴，所以你可以看到它有效：https://jsfiddle.net/1w31kp4o/

我希望这就是你想要的。

Answer 2

Philipps解决方案很棒，可能是您当前问题的最佳解决方案。然而，这里有一些替代方法。

使用border-bottom

的简单方法

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

fiddle

使用:after

的更极端的方法

这个可能对你想要的东西有点过分，但是如果你需要的话，这会提供一些灵活性。例如，您可以通过更改bottom值以及其他内容来调整下划线的距离，例如更改下划线粗细，颜色等等。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

fiddle

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;
}

Here's a CodePen让你看看