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”上使用伪类和伪元素，他们在 all html标签“ a”上添加了下边框。
同样，'scaleX'等于0（默认值1）时，他们也将标签'a'初始化为宽度0。
如您所见，当您将光标移到html标记'a'上时，css属性'scaleX'等于1，因为您触发了html标记'a上添加的css伪类'：hover' '。
由于css属性“ tansition”影响“ transform”属性的值变化，因此scaleX从0到1之间有一种顺畅的运动，反之亦然。

文档：

Here，您可以找到有关伪类的一些解释。
Here，您可以找到有关伪元素的一些解释。
Here，您可以找到有关scaleX的一些解释。
Here，您可以找到有关过渡的一些解释。

让我知道这是否对您有足够的帮助。

Answer 2

尝试添加此CSS，它在您的网站上对我有用。

.stroke li a{
 margin: 0 5px;
  position: relative;
}

.stroke li a::after{
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: #fff;
  transform: scaleX(0);
  transform-origin: center center;
  transition: all .4s ease-out;
}

.stroke li a:hover::after{
  transform: scaleX(1);
}

如何获得想要的效果？

2 个答案: