Hover style that changes the font weight in css-CodePudding

It's my first post here. English is not my primary language so i'll do my best. I'm learning CSS and HTML right now and i have a question.

I'm creating an horizontal nav bar. In my css i want to create an hover style for my links where the font weight will change. The problem is that when i change the font-weight of one of the , all my other moves a little. I want them to stay still. Do you have an idea to stop that from happening ?

Thank you for your help !

.nav-buttons {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.75rem;
}

.buttons {
    padding: 10px;
}

.buttons a {
    color: black;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
}

.buttons a:hover {
    cursor: pointer;
    font-weight: 800;
    color: var(--hover-state);
}

.buttons a.active {
    color: var(--primary-dark);
    font-weight: 600;
}

<nav>
    <div >
        <h2 >some<span >company</span></h2>
        <ul >
            <li ><a href="#">Home</a></li>
            <li ><a  href="#">Products</a></li>
            <li ><a href="#">Faq</a></li>
            <li ><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>

CodePudding user response：

You can fake a font's weight by using text-shadow which doesn't change the width so yeah, you don't see the movement of other buttons.

.nav-buttons {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.75rem;
}

.buttons {
  padding: 10px;
}

.buttons a {
  color: black;
  text-decoration: none;
  font-size: 1.125rem;
  font-weight: 400;
}

.buttons a:hover {
  cursor: pointer;
  text-shadow:0px 0px 1px black;
  color: var(--hover-state);
}

.buttons a.active {
  color: var(--primary-dark);
  font-weight: 600;
}

<nav>
  <div >
    <h2 >some<span >company</span></h2>
    <ul >
      <li ><a href="#">Home</a></li>
      <li ><a  href="#">Products</a></li>
      <li ><a href="#">Faq</a></li>
      <li ><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

CodePudding user response：

Adding a width on your li class buttons will do it. Maybe something like this

.nav-buttons {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 1.75rem;
}

.buttons {
    width: 50px;
    padding:10px;
}

.buttons a {
    color: black;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 400;
}

li a:hover {
    cursor: pointer;
    font-weight: 800;
    color: var(--hover-state);

}

.buttons a.active {
    color: var(--primary-dark);
    font-weight: 600;
}

<nav>
    <div >
        <h2 >some<span >company</span></h2>
        <ul >
            <li ><a href="#">Home</a></li>
            <li ><a  href="#">Products</a></li>
            <li ><a href="#">Faq</a></li>
            <li ><a href="#">Contact</a></li>
        </ul>
    </div>
</nav>