如何制作边框底部动画和忽略填充

Question

我正在尝试制作一个带有边框底部的导航栏作为悬停效果，其目的是跟随用户鼠标悬停并突出显示该项目。但是，边框底部包括其父级的填充，我不喜欢。使用padding: 0px; 不行。

这是我到目前为止所得到的，请耐心等待，因为我对 HTML 和 CSS 还很陌生，这是我第一次制作网站：

*{
	padding: 0px;
	margin: 0px;
}
#navdiv ul {
	width: 100%;
	height: 80px;
	line-height: 80px;
	vertical-align: middle;
	background: #333;
	margin-top: 5px;
}
#container {
	margin-left: 200px;
	margin-right: 200px;
}
#navdiv ul a {
	width: 80%;
	text-decoration: none;
	color: #f2f2f2;
	padding: 15px;
	font-size: 16px;
}
#navdiv ul li {
	height: 63px;
	list-style-type: none;
	float: right;
}
#navdiv ul li:hover {
	border-bottom: 5px solid #FF9933;
	transition: all 0.3s ease-in-out;
}
#highlight {
	display: inline-block;
	line-height: 1em;
	padding: 0;
	border-bottom: 5px solid #FF9933;
}
#navdiv img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 60px;
	vertical-align: middle;
}

<nav>
  <div id="Maindiv">
    <div id="navdiv">
      <ul>
        <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <li><a href="../item4/index.html">Item 4</a></li>
          <li><a href="../item3/index.html">Item 3</a></li>
          <li><a href="../item2/index.html">Item 2</a></li>
          <li><a href="../item1/index.html" id="highlight">Item 1</a></li>
        </div>
      </ul>
    </div>
  </div>
</nav>

如您所见，橙色边框底部采用“Item 1”填充，这使得边框底部大于其内容，我觉得它很难看，我想修复它。

同时，有没有办法让底部边框动画从左到右？如果是这样，是否还有一种方法可以让它“聪明”到足以知道如果用户的光标来自项目的左侧，它应该从“左到右”进行动画处理，如果光标来自右侧，则对其进行动画处理相应地“从右到左”？

我也想让它跟随用户光标，而不是在离开上一个项目后立即消失并在下一个项目悬停后立即出现。

很抱歉，这篇文章很长，我在使用谷歌进行故障排除时遇到了很多问题，但我所知道的知识很少。

非常感谢！ - 凯。

Answer 1

从#navdiv ul a 中删除width: 80%; 将解决较大的边框底部问题。

请在下面找到从左到右的边框底部效果。

https://codepen.io/julysfx/pen/qXBzYL

Answer 2

边框看起来像这样的原因是因为边框在 HTML 元素的外部。填充位于元素内，因此边框将包含该元素，从而在该边界处设置边框。这个堆栈溢出问题用图表解释了这一点： Difference between margin and padding?

您可能希望更改为使用边距来分隔项目。此外， width: 80% 也可能使边框看起来比您想象的要长一些。您可以增加项目之间的边距，或者如果您真的希望项目的宽度为 80%，则可以有一个宽度为 80% 的父 div，这样它就不会影响边框。

这就是你要找的东西吗？

*{
	padding: 0px;
	margin: 0px;
}

.slider {
  position: absolute;
  display:block;
  left: 0;
  top: 90%;
  margin: 0 auto;
  height: 2px;
  width: 0%;
  border-bottom: 5px solid #FF9933;
  transition: width 1s ease;
}

#navdiv {
  background: #333;
}

#navdiv ul {
	width: 100%;
  display: inline;
}

#container {
	margin-left: 200px;
	margin-right: 200px;
  height: 63px;
  line-height: 63px;
}

#navdiv ul a {
	text-decoration: none;
	color: #f2f2f2;
	font-size: 16px;
}

#navdiv ul li {
	list-style-type: none;
	float: right;
	position:relative;
  display:inline;
  background-color: red;
  line-height: 29px;
  margin-top: 16px;
  margin-right: 10px;
}

#navdiv ul li:hover .slider {
	border-bottom: 5px solid #FF9933;
	transition: all 0.3s ease-in-out;
	width: 100%;
}

#highlight {
	display: inline-block;
	line-height: 1em;
	padding: 0;
	border-bottom: 5px solid #FF9933;
}

#navdiv img {
	width: auto;
	max-width: 100%;
}

<nav>
  <div id="Maindiv">
    <div id="navdiv">
       <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <ul>
            <li>
              <a href="../blog/index.html">Item 5</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../contactos/index.html">Item 4</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../serviços/index.html">Item 3</a>
              <span class="slider"></span> 
            </li>
            <li>
              <a href="../quem_somos/index.html">Item 2</a>
              <span class="slider"></span>
            </li>
            <li id="highlight">
              <a href="../home/index.html">Item 1</a>
              <span class="slider"></span>
            </li>
      </ul>
      </div>
    </div>
  </div>
</nav>