Question

制作this codepen可以更好地说明情况。正如您在导航栏中看到的那样，我为每个nav-item选择器设置了::after，以创建下划线效果。

我注意到，尽管在我使用Twitter引导4中的类d-flex align-items-center justify-content-center的一页中，当我将鼠标悬停在导航栏上时，元素也会发生变化。

您可以在创建的Codepen中看到相同的效果。如果加载页面，然后将鼠标悬停在导航栏上，则文本将更改位置。

注意：：当我从另一台运行Windows和Firefox（不知道版本）的计算机尝试运行时，这没有发生。目前，我在ubuntu 18.04上使用Firefox 67.0.4，并且遇到了这个问题。

有人知道为什么会发生这种情况吗？

.nav-link {
  padding: 15px 5px;
  transition: 0.2s;
}

.nav-item:hover::after {
  width: 100%;
}

.nav-item::after {
  content: '';
  display: block;
  width: 0px;
  height: 2px;
  background: #00abfe;
  transition: 0.2s;
}

.index-top-content {
  height: 40vh;
}

<link href="https://fonts.googleapis.com/css?family=Comfortaa:400,500,700&display=swap&subset=greek" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<div class="d-flex flex-column">
  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">
        Site
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">test</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">test</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">test</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="d-flex flex-grow-1 flex-column">

    <section class="index-top-content d-flex align-items-center justify-content-center">
      <div>
        <H1>Testing</H1>
        <p style="text-align: center">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>

    </section>
    <div class="col-md-6 align-self-center">
      <p style="text-align: center;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>

  </div>



  <!-- Footer -->
  <footer class="bg-dark text-secondary text-center">

    <!-- Copyright -->
    <div class="footer-copyright text-center py-3">© 2019:
      <a style="color:#6c757d;" href="#"> test</a>
    </div>
    <!-- Copyright -->

  </footer>
  <!-- Footer -->


</div>

:: after选择器将其他元素弄乱了

0 个答案: