Cant Center border bottom below dynamically - html

Question

I have a simple navbar and i have few menu items via ul and what I'm trying to do is that whenever i hover over the li a border-bottom appears in center of the text but im having a few problems first is that the border-bottom's width is leaving the text and sometimes it doesn't it cover the full width of the text above it
body{
margin: 0px;
padding: 0px;
background: #2c3e50;
}
.header__middle ul{
list-style-type: none;
display: flex;
}
.header__middle ul li a{
margin-right: 10px;
text-decoration: none;
font-size: 1.2em;
color: black;
text-align: center;
}
.header__middle ul li {
position: relative;
}
.header__middle ul li:hover ::after{
content: "";
position: absolute;
left: 4%;
bottom: -13%;
width: 40px;
border-bottom: 2px solid black;
}
<div class="header__middle">
<ul>
<li >Home</li>
<li>Join</li>
<li>FAQs</li>
<li>About Us</li>
</ul>
</div>
HTML

Answer 1

Here, try this. The only issue I see is that your 40px border is too wide for some items like "Join". (Notes are in the code)
body {
margin: 0px;
padding: 0px;
background: #2c3e50;
}
.header__middle ul{
list-style-type: none;
display: flex;
}
/* Remove your margin here and re-add it as a padding on the parent li */
.header__middle ul li a{
text-decoration: none;
font-size: 1.2em;
color: black;
text-align: center;
}
.header__middle ul li {
position: relative;
padding-right: 10px;
}
/* Change to display block and position relative */
.header__middle ul li:hover ::after{
content: "";
display: block;
position: relative;
left: calc(50% - 20px); /* To center, set your left for 50% minus half of your bar's width */
width: 40px;
border-bottom: 2px solid black;
}
<div class="header__middle">
<ul>
<li >Home</li>
<li>Join</li>
<li>FAQs</li>
<li>About Us</li>
</ul>
</div>
Edit: Sorry, I may have misunderstood. I thought you were wanting your 40px bar to be centered on each object.
If you want your bar to be the same width as each item, just remove the left and width properties from my code above, as shown here:
.header__middle ul li:hover ::after{
content: "";
display: block;
position: relative;
border-bottom: 2px solid black;
}