How to fix inline elements shifting when made bold on hover with CSS?

Sometimes, we want to fix inline elements shifting when made bold on hover with CSS.

In this article, we’ll look at how to fix inline elements shifting when made bold on hover with CSS.

How to fix inline elements shifting when made bold on hover with CSS?

To fix inline elements shifting when made bold on hover with CSS, we set the letter-spacing value.

For instance, we write

<ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#">item 2</a></li>
  <li><a href="#">item 3</a></li>
</ul>

to add some elements.

Then we write

li,
a {
  display: inline-block;
}
a {
  font-size: 14px;
  padding-left: 10px;
  padding-right: 10px;
  letter-spacing: 0.235px;
}

a:hover,
a:focus {
  font-weight: bold;
  letter-spacing: 0;
}

to set use letter-spacing: 0; to keep the spacing constant when we focus on the link.

Conclusion

To fix inline elements shifting when made bold on hover with CSS, we set the letter-spacing value.