Bottom border on menu extends too far on hoover - html

Question

I have created a responsive pure css menu on my page which works great except for the hover. On hover I need it to draw a magenta line under the menu text. This works already but the line extends too far past the end of the word. It should only underline the word. I had this working previously so I know it can be done but that was with a different menu and I achieved it through random bashing of keys so I don't know how to repeat it.
This might be a duplicate. I noticed two other related posts but I was not able to get their solutions to work so either it's a different problem or I'm not figuring out how to apply the changes to my code correctly.
This is what it currently looks like:
HTML
#{
ViewBag.Title = "_Layout";
}
<link href="~/Content/Site.css" rel="stylesheet" />
<div class="wrapper">
<header class="header">
<a href="/" class="logo">
<img src="~/Images/companylogo.png" />
</a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>About</li>
<li>Residential & Business</li>
<li>My Account Details</li>
<li>FAQ</li>
<li>Contact</li>
</ul>
</header>
<!--End of code for responsive menu-->
<!--HEADER END-->
<div class="page-content">
<div class="cloud1">
<img src="~/Images/cloud1.png" />
</div>
<div class="cloud2">
<img src="~/Images/cloud2.png" />
</div>
<div class="cloud3">
<img src="~/Images/cloud3.png" />
</div>
<div class="cloud4">
<img src="~/Images/cloud4.png" />
</div>
<!--CONTENT START-->
<div class="box">
#RenderBody()
</div>
<!--CONTENT END-->
</div>
<!--FOOTER START-->
<div class="bottom">
<div class="padt120">
<img src="~/Images/about-buildings.png" alt="Buildings" class="buildings" />
<div class="grass"></div>
</div>
<footer class="padtb30">
<span class="copyright">
<small class="lightgrey-text">
© Copyright 2016. All Rights Reserved. SomeCompany Inc. Privacy Policy
</small>
</span>
</footer>
</div>
</div>
CSS
#font-face {
font-family: 'HelveticaNeue-Thin';
src: url('../Resources/HelveticaNeue-Thin.woff') format('woff');
}
#font-face {
font-family: 'HelveticaNeue';
src: url('../Resources/HelveticaNeue.woff') format('woff');
}
#font-face {
font-family: 'fontawesome-webfont';
src: url('../Resources/fontawesome-webfont.ttf') format('truetype');
}
#keyframes cloud1 {
0% {
left: -488px;
top: 100px;
}
100% {
left: 100%;
top: 100px;
}
}
#keyframes cloud2 {
0% {
left: -215px;
top: 200px;
}
100% {
left: 100%;
top: 200px;
}
}
#keyframes cloud3 {
0% {
left: -421px;
top: 300px;
}
100% {
left: 100%;
top: 300px;
}
}
#keyframes cloud4 {
0% {
left: -359px;
top: 400px;
}
100% {
left: 100%;
top: 400px;
}
}
body {
padding-top: 50px;
padding-bottom: 20px;
background-image: linear-gradient(#B2D2EA, #ffffff);
overflow-x: hidden;
}
.header {
background-color: #fff;
position: absolute;
display: table;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 3;
font-family: HelveticaNeue-Thin;
font-size: medium;
}
.header ul {
align-self: center;
height: auto;
margin: 0;
padding: 8px 5%;
list-style: none;
overflow: hidden;
background-color: #fff;
}
.heading li {
display: inline;
padding: 5px;
}
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
.header li a:hover {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
a::after {
display: block;
content: attr(title);
font-family: HelveticaNeue-Thin;
height: 1px;
color: transparent;
overflow: hidden;
visibility: hidden;
margin-bottom: -1px;
}
#about {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#residential {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#myaccountdetails {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#faq {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
#contactus {
padding-left: 0px;
padding-right: 0px;
text-align: center;
width: auto;
}
.header .logo {
display: table-cell;
height: 100%;
padding-left: 5%;
vertical-align: middle;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
}
/*End of code added for menu*/
/*Style menu icon*/
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #80BD01;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #80BD01;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/*End of style for men icon*/
/*Icon and menu animations when the checkbox is clicked*/
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/*End of menu and icon animations*/
/*Show the horizontal menu items for larger browser widths by default*/
#media (min-width: 48em) {
.header li {
float: left;
}
.header li a {
margin: 0;
padding: 20px 30px;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
}
/*End of menu items for large browser widths*/
.page-content {
font-family: HelveticaNeue;
margin-left: 10%;
margin-right: 10%;
padding-top: 50px;
padding-bottom: 100px;
max-width: 100%;
height: auto;
text-align: center;
}
.cloud1 {
animation-name: cloud1;
animation-duration: 25s;
animation-iteration-count: infinite;
position: absolute;
top: 100px;
left: -488px;
z-index: -1;
}
.cloud2 {
animation-name: cloud2;
animation-duration: 25s;
animation-delay: 10s;
animation-iteration-count: infinite;
position: absolute;
top: 200px;
left: -215px;
z-index: -1;
}
.cloud3 {
animation-name: cloud3;
animation-duration: 20s;
animation-delay: 7s;
animation-iteration-count: infinite;
position: absolute;
top: 300px;
left: -421px;
z-index: -1;
}
.cloud4 {
animation-name: cloud4;
animation-duration: 30s;
animation-delay: 10s;
animation-iteration-count: infinite;
position: absolute;
top: 400px;
left: -359px;
z-index: -1;
}
.box {
background-color: #F28B20;
border-radius: 5px;
height: auto;
margin-bottom: 150px;
width: 80%;
display: inline-block;
box-shadow: 10px 10px 5px #888888;
background-image: url("../Images/logo_faded_background-2.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.bottom {
position: relative;
height: auto;
width: 100%;
}
.grass {
height: 20px;
width: 100%;
background-color: #80BD01;
}
.padtb30 {
width: 100%;
position: absolute;
bottom: 0;
height: 80px;
line-height: 80px;
background-color: #ffffff;
text-align: center;
}
.buildings {
display: block;
margin: 0 auto;
}
.padt120 {
position: absolute;
width: 100%;
height: 100px;
bottom: 100px;
background-image: url("../Images/backcity.png");
background-position: center;
}
.copyright {
font-family: HelveticaNeue;
}
Here's a fiddle for the user who requested it.
http://jsfiddle.net/kd7nv4vb

Answer 1

I changed your HTML and CSS a bit and came up with this:
HTML: Added <span>in <a>:
<li>
<a href="#about">
<span>About</span>
</a>
</li>
CSS:
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
white-space: nowrap;
color: #171581;
}
.header li a span {
transition: 0.5s ease;
border-bottom: 3px solid transparent;
}
.header li a:hover span {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}
Previous (your code):
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px;
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
.header li a:hover {
color: #D60053;
border-bottom: 3px solid #D60053;
border-bottom-width: 2px;
padding-bottom: 2px;
width: auto;
}

Answer 2

You're issue was with the padding on the link elements.
.header li a {
text-decoration: none;
display: inline-block;
height: 20px;
padding: 8px 8px 8px 8px; /*This was where your problem was*/
font-family: HelveticaNeue-Thin;
border-bottom: 3px solid transparent;
transition: 0.5s ease;
white-space: nowrap;
color: #171581;
}
Borders will always fill the space of the container for its respective element. If you switch that line of padding to remove the left and right padding, you should end up with what you want.
padding: 8px 0px 8px 0px;
Here is a working example.
If this works, please don't forget to mark this as the correct answer so anyone else with this problem will see this answer.