My navigation bar height increases when hovering over the links - is the line underneath each link c-CodePudding

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 >
      <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>

CodePudding user response：

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 >
      <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>

CodePudding user response：

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 >
      <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>