How to make border-bottom animation & ignore padding - html

Question

I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using padding: 0px; doesn't do it.
Here's what I've got so far, bear with me since I'm fairly new to HTML & CSS and this is my first time making a website:
*{
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">
<img src="../img/menu-logo.png" alt="Menu Logo">
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</div>
</ul>
</div>
</div>
</nav>
As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.
While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?
I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.
Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know.
Massive thanks!
- Kay.

Answer 1

Removing width: 80%; from #navdiv ul a will fix the larger border-bottom issue.
Please find below for left-to-right border-bottom effect.
https://codepen.io/julysfx/pen/qXBzYL

Answer 2

The reason for the border looking like that is because the border is around the outside of the HTML element. Padding is within the element so the border will incorporate that and thus do a border at that boundary. This stack overflow question explains this with diagrams:
Difference between margin and padding?
You might want to change to using margin to space out the items. Also, width: 80% might also make the border look a bit longer than you imagined. You could either increase the margin between items, or if you really want the items to be 80% wide, you could have a parent div which is 80% width so that it doesn't affect the border.
Is this more what you are looking for?
*{
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">
<img src="../img/menu-logo.png" alt="Menu Logo">
<ul>
<li>
Item 5
<span class="slider"></span>
</li>
<li>
Item 4
<span class="slider"></span>
</li>
<li>
Item 3
<span class="slider"></span>
</li>
<li>
Item 2
<span class="slider"></span>
</li>
<li id="highlight">
Item 1
<span class="slider"></span>
</li>
</ul>
</div>
</div>
</div>
</nav>