html - 我怎样才能获得我想要的效果？

Question

我想获得我学校的页面导航栏效果，即如果导航栏元素处于悬停状态，则该元素的底部会出现白色边框。(例如 https://www.kecskemet.piarista.hu/%C3%B3voda/h%C3%ADrek 只需将光标移动到导航栏元素上)

body {
  font-family: 'Quicksand', sans-serif;
}

.thumbnail {
  transition: all 0.2s;
}

.thumbnail:hover {
  transform: scale(1.1);
}

p {
  text-align: center;
}

.jumbotron {
  border: 1px solid black;
}

.tested {
  font-size: 140%;
}

.bug {
  padding: 15px;
  border-top: 1px solid black;
}

.navbar-inverse {
  transition: all 0.2s;
}

.navbar-inverse:hover {
  transform: scale(1.1);
}

.weboldalroltext {
  padding-bottom: 3px;
}

body {
  padding-top: 70px;
}

.mainHeader {
  padding-bottom: 50px;
}

.navbar {
  font-size: 20px;
}

.navbar-brand {
  font-size: 22px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <div class="container">
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <a href="#" class="navbar-brand">Sanyigarázs</a>
        </div>
        <div class="nav navbar-nav stroke">
          <li><a href="rolunk.html">Rólunk</a></li>
          <li><a href="kapcsolat.html">Kapcsolat</a></li>
          <li><a href="weboldalrol.html">Weboldalról</a></li>
        </div>
      </div>
    </nav>

我尝试了很多方法，但没有任何帮助，也许我仍然不擅长 CSS，但我需要你们的帮助，如果你们能回答我，谢谢。

Answer 1

如果您检查所链接网站的“a”标签上的所有样式，您会注意到它们在“a”标签上也有这种样式代码:

a:after {
  display: block;
  content: '';
  border-bottom: solid 3px #fff;
  transform: scaleX(0);
  transition: transform 250ms ease-in-out;
  padding: 10px 0px 0px 0px;
}
a:hover:after {
  transform: scaleX(1);
}

因此，您只需将此代码添加到您的 css 中，即可获得您想要的结果。这是应用于您的代码的效果示例 JSfiddle example here

对他们所做的一些解释:
通过在 html 标签“a”上使用伪类和伪元素，他们为 所有 html 标签“a”添加了底部边框。
同样，“scaleX”等于 0(默认值 1)，他们已将标签“a”初始化为宽度 0。
如您所见，当您将光标移到 html 标记“a”上时，css 属性“scaleX”变为等于 1，因为您触发了添加到 html 标记“a”上的 css 伪类“:hover” '.
由于 css 属性“transition”作用于“transform”属性的值变化，scaleX 从 0 到 1 之间有一种流畅的移动，反之亦然。

文档:

• > Here你可以找到一些关于伪类的解释。
• > Here你可以找到伪元素的一些解释。
• > Here你可以找到 scaleX 的一些解释。
• > Here你可以找到一些关于过渡的解释。

如果这对您有足够帮助，请告诉我。