Image position changes slightly when hovering over link-CodePudding

Im new to HTML and CSS, so Im still in the process of learning basics. When I hover over my links, the logo-image moves sligthly. I'm sure there is a simple fix, but I can't wrap my head around it. Here is my code:

CSS:

.header {
min-height: 100vh;
width: 100%;
background-color: #14182d;   
}

nav {
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}

nav img {
width: 70px;
}

.nav-links {
flex: 1;
text-align: left;
margin-left: 160px;
}

.nav-links ul li {
list-style: none;
display: inline-block;
margin: 40px 40px;
position: relative;

}

.nav-links ul li a {
color: #ffff;
text-decoration: none;
font-size: 20px;
font-family: "SF UI Text Regular";
}

.nav-links ul li::after {
content: "";
width: 0%;
height: 2px;
background-color: #ffff;
display: block;
transition: 0.3s;
float: right;
margin-top: 4px;
}

.nav-links ul li:hover::after {
width: 100%;
float: left;

}

CodePudding user response：

This is the reason, the li::after should be absolutely positioned to avoid the layout shift on hover.

.nav-links ul li::after {}

CodePudding user response：

Fixed it. Please accept this

.header {
  min-height: 100vh;
  width: 100%;
  background-color: #14182d;
}

nav {
  display: flex;
  padding: 2% 6%;
  justify-content: space-between;
  align-items: center;
}

nav img {
  width: 70px;
}

.nav-links {
  flex: 1;
  text-align: left;
  margin-left: 160px;
}

.nav-links ul li {
  list-style: none;
  display: inline-block;
  margin: 40px 40px;
  position: relative;
}

.nav-links ul li a {
  color: #ffff;
  text-decoration: none;
  font-size: 20px;
  font-family: "SF UI Text Regular";
}

.nav-links ul li::after {
  content: "";
  width: .1px;
  height: 2px;
  background-color:transparent;
  display: block;
  transition: 0.3s;
  float: right;
  margin-top: 4px;
}
.nav-links ul li:hover::after {
  width: 100%;
  float: left;
  background-color:white;
}

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

    <title>Jorgen Klaastad - Portfolio</title>
  </head>
  <body>
    <section >
      <nav>
        <a href="index.html"><img src="images/logo.png"/></a>
        <div >
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Contact Me</a></li>
          </ul>
        </div>
      </nav>
    </section>
  </body>
</html>