'My navigation bar height increases when hovering over the links - is the line underneath each link causing it?

I am having an issue where, when I hover over the navigation bar links, the entire navigation bar's height increases slightly.

I think the red line under each link is causing this to happen, but I am not sure why - could someone tell me what I have done wrong?

Also, I think it has something to do with the height of the red line.

Here is the code:

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}


.nav{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #ffddb8;
border-style: solid;
border-width: 3px;
margin-top: 18px;
width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
position: relative;
margin-bottom: 18px;
}
.nav li{
    display:inline;
}
.nav a{
display: inline-block;
padding: 10px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-family: Arial;
color: black;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover:after {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>

  <div id="content">


    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>


  </div>
htmlcsswebresponsive-design


Solution 1:[1]

Yes, the pseudo element you use for the red underline has a height which adds to the parents height. You can change the after element to position: absolute; and its parent to position: relative; to prevent that:

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}


.nav{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffddb8;
  border-style: solid;
  border-width: 3px;
  margin-top: 18px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  position: relative;
  margin-bottom: 18px;
}
.nav li{
    display:inline;
}
.nav a{
  display: inline-block;
  padding: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  color: black;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
  position: relative;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover:after {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 2 * 20px);
    height: 3px;
    background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>

  <div id="content">


    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>


  </div>

Solution 2:[2]

A simple solution would be to just add the code you had in the psuedo element with hover, to without hover. Have the background set to be transparent. Then on hover, you can set the background to bet red.

See my code snippet, hopefully that is what you are looking for!

body {
  margin: 0px;
  background-color: #bfe6f7;
}

#content {
  position: relative;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
  height: auto;
  background-color: white;
  border-style: solid;
  border-width: 3px;
}

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  background-color: #ffddb8;
  border-style: solid;
  border-width: 3px;
  margin-top: 18px;
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  height: auto;
  position: relative;
  margin-bottom: 18px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: 10px;
  padding-right: 10px;
  padding-left: 10px;
  text-decoration: none;
  font-size: 20px;
  font-family: Arial;
  color: black;
  font-weight: bold;
  padding-left: 20px;
  padding-right: 20px;
}

.nav a::after {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background-color: transparent;
}

a:hover {
  background-color: #99f2a3;
}

.nav a:hover::after {
  background-color: red;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../style.css">
  <title>Home</title>
</head>

<body>
  <div id="content">
    <ul class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/work/">Work</a></li>
      <li><a href="/clients/">Clients</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>
  </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 thpbaxxter
Solution 2 treckstar

Related Questions