How to Shift Inline Elements When Text Bold on Hover using CSS ? Last Updated : 08 Feb, 2022 Comments Improve Suggest changes Like Article Like Report When we will use a:hover pseudo-class to add a bold effect to the inline elements then we observe that whenever we hover over elements with the mouse, the elements to the right side of the mouse gets shifted to the right. This is not a good user experience thus needs to be removed. We can use the letter-spacing CSS property to fix this issue and make non-shifting inline elements. The letter-spacing is a CSS property that is used to increase or decrease the space between characters in a text. This CSS property can be used to prevent the shifting of the inline elements which get bold when we hover over them. Below is the working example of the problem and solution to it. Syntax: .class_name { letter-spacing: value }Example: html <!DOCTYPE html> <html> <head> <style> li { list-style: none; display: inline; } .nav a { letter-spacing: 0.36px; } li a:link, li a:visited { text-decoration: none; color: #000; } li a:hover { text-decoration: none; font-weight: bold; } .nav li a:hover { text-decoration: none; font-weight: bold; letter-spacing: 0; } </style> </head> <body> <h3>Before:</h3> <ul> <li><a href="#">GeeksforGeeks 1</a></li> <li><a href="#">GeeksforGeeks 2</a></li> <li><a href="#">GeeksforGeeks 3</a></li> </ul> <h3>After:</h3> <ul class="nav"> <li><a href="#">GeeksforGeeks 4</a></li> <li><a href="#">GeeksforGeeks 5</a></li> <li><a href="#">GeeksforGeeks 6</a></li> </ul> <body> </html> Output: Comment More infoAdvertise with us Next Article How to change background color when hover over li elements using CSS ? G gurrrung Follow Improve Article Tags : Web Technologies CSS CSS-Misc Similar Reads How to change background color when hover over li elements using CSS ? In this article, we will see how to change the background color of li (list item) on hover using CSS.The hover effect may be used to indicate interactivity or might just be there for aesthetic purposes, like highlighting different items in case of a list. Hover event can be styled using the :hover p 2 min read How to Shake Text on hover using HTML and CSS? Shaking Text animation is a very cool animation which can be used in websites, this animation can be easily created using some basic HTML and CSS, the below section will guide on how to create the animation.HTML Code: In this section we have a basic div element which contains some text inside of it. 2 min read How to add border to an element on mouse hover using CSS ? Adding a border to an element on mouse hover using CSS involves changing the element's border style when the mouse pointer is over it. This effect enhances user interaction by visually highlighting the element, achieved using the :hover pseudo-class to modify border properties.ApproachHTML Structure 1 min read How to spin text on mouse hover using HTML and CSS? The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in <li> tag and then using CSS:hover Selector selector we will rotate eac 3 min read How to Skew Text on Hover using HTML and CSS? Skewed text animation effect can be created using HTML and CSS, this animation looks very cool and can be used in websites to make them look more dynamic, the following sections will guide on how to create the desired animation effect.First Section: In this section we will create a basic div tag whi 2 min read How to Rotate a Text 360 Degrees on hover using HTML and CSS? Rotating text 360 degrees on hover is a visual effect that makes text spin around its center point when the user hovers their cursor over it. To rotate text 360 degrees on hover using HTML and CSS, you can apply a CSS animation to the text element.Rotate A Text 360 Degrees On HoverThe text is center 2 min read Like