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

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *