“text-underline-offset”在"display: block“中不起作用”

Question

这是我的代码

​

.link {
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: inline-block;
}

.navigation .active {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 5px;
}

<nav class="navigation container">
  <div class="nav-brand">iAmADeveloper</div>
  <ul class="list-non-bullet nav-pills">
    <li class="list-inline-item active"><a class="link" href="/">Home</a></li>
    <li class="list-inline-item"><a class="link" href="projects.html">Projects</a></li>
    <li class="list-inline-item"><a class="link" href="blogs.html">Blogs</a></li>
  </ul>
</nav>

​

每当我将.link设置为display: inline-block时，text-underline-offset: 5px；样式不起作用，并且在VS代码中显示为白色。但是，当我删除display: inline-block时，它工作得很好。我需要我的链接是下划线时悬停。如何解决这个问题？PS:我没有在我的代码中实现JS。

Answer 1

您需要将a作为目标

​

.link {
  text-decoration: none;
  padding: 0.5rem 1rem;
  display: inline-block;
}

.navigation .active a{
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 5px;
}

<nav class="navigation container">
  <div class="nav-brand">iAmADeveloper</div>
  <ul class="list-non-bullet nav-pills">
    <li class="list-inline-item active"><a class="link" href="/">Home</a></li>
    <li class="list-inline-item"><a class="link" href="projects.html">Projects</a></li>
    <li class="list-inline-item"><a class="link" href="blogs.html">Blogs</a></li>
  </ul>
</nav>

​