[分享]css中导航栏底部下横线

CSS中导航栏底部下横线是创建一个专业外观的一个好方法。一些最常见的方法是使用伪元素，例如“::before” 或 “::after”，让我们来看一些CSS代码吧： 首页 关于我们 产品 联系我们 ...

CSS中导航栏底部下横线是创建一个专业外观的一个好方法。一些最常见的方法是使用伪元素，例如“::before” 或 “::after”，让我们来看一些CSS代码吧：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

<style>
nav ul li {
  display: inline-block;
  position: relative;
  padding-bottom: 5px;
}
nav ul li::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #333;
  transform: scale(0,1);
  transition: transform 0.3s ease;
  transform-origin: bottom center;
}
nav ul li:hover::before {
  transform: scale(1);
}
</style> 

在这个代码中，我们首先将所有的导航li元素设置成inline-block，相对定位，并设置一个padding-bottom来为下划线留出空间。然后，我们使用伪元素::before创建一个绝对定位的2px的黑色长条，初始缩放比例为0，然后使用CSS transition特性添加一些动画效果。最后我们让伪元素绝对定位于li元素的底部，相对于内容框盒模型进行定位。

好了，这就是实现导航栏底部下横线的一个处理技巧。通过将实线或虚线添加到导航栏元素下方，可以将其映射到布局中，创造出更专业、更精美的Web页面。