css 在动态大小的导航项上水平居中导航指示器的巧妙CSS技巧。

Posted 2021-05-13

.navbar.home .navbar-nav li{
  position: relative;
}

.navbar.home .navbar-nav li.active a:after{
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;	
  border-top: 10px solid #bd0304; // Triangle
  content: ''; // Empty content
  height: 0; 
  left: 50%;
  margin-left: -10px; // The width of your indicator
  position: absolute;
  top: 100%;
  width: 0; 
}

/*
<ul class="nav navbar-nav">
	<li class="active"><a href="#">Featured</a></li>
	<li><a href="#">Products</a></li>
	<li><a href="#">Ordering Food</a></li>
	<li><a href="#">Your Clients</a></li>
	<li><a href="#">Education</a></li>
	<li><a href="#">Support</a></li>
</ul>
*/