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.