Open In App

How to Shift Inline Elements When Text Bold on Hover using CSS ?

Last Updated : 08 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
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: 
     

 



Similar Reads

How to bold the text using CSS ?
We know that in HTML, we have &lt;b&gt; and &lt;strong&gt; tags to make the content bold. When it comes to making a piece of text bold using CSS, then also we have an appropriate property to do the same. We will use the font-weight property of CSS to make the content bold. We have a variety of options to set the thickness level of our text. normal
2 min read
What is the difference between display: inline and display: inline-block in CSS?
The display property in CSS is a very useful and commonly used property that contains many values. The display property defines how an HTML element should be displayed on the webpage. The property also specifies the type of box used for an HTML element and how it should be laid out on the page. If we need to display the elements that are laid out a
4 min read
What is the difference between inline-flex and inline-block in CSS?
The display property specifies how an element should be displayed on a webpage. There can be many values, related to this property in CSS. Inline-block and inline-flex are two such properties. Although there are several values that this property can have, to understand the aforementioned, let us first look into three other values: inline, block, an
3 min read
How display: inline is different from display: inline-block in CSS ?
In this article, we will know about the display property in CSS, along with understanding the 2 different property values for display property, i.e., display: inline &amp; display: inline-block properties, &amp; will understand their basic differences &amp; implementation through the examples. The display property facilitates setting the element by
3 min read
How to Write Bold Text using HTML ?
HTML, the backbone of web content, offers various ways to emphasize text. One such method is making text bold. This guide will walk you through the process of creating bold text in HTML, ensuring your content stands out. Bold text plays a crucial role in web content. It not only highlights important information but also improves readability by brea
2 min read
How to write a:hover in inline CSS?
It is called pseudo-selector and used to select all the elements when the user move mouse over the elements. It can be used on all the element. A &lt;!DOCTYPE html&gt; element must be declared in the document to see the working of this selector in all the elements. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;a
2 min read
How to create Bold Specific Text In React JS ?
ReactJS has e­merged as one of the­ most widely adopted JavaScript libraries for de­signing user interfaces. The­y often encounter scenarios that demand spe­cialized text styling capabilities. This include­s the need to e­mphasize certain words or phrases by applying bold formatting. In this article, we'll see how to bold specific text in React. Wh
3 min read
How to bold text in php?
Bold Text is used in web applications to highlight important information or headings. In this article, we will learn to bold text in PHP using two possible approaches with implementation. Below are the approaches to bold text in PHP: Table of Content Using the b tag from HTMLUsing Inline CSSUsing the &lt;b&gt; tag from HTMLIn this approach, we are
2 min read
How to make first word bold of all elements using jQuery ?
In this article, we will make first word bold of all elements using jquery. To make the first word bold, we use html(), and text() methods. html() Method: The html() method in jQuery is used to set or return the innerHTML content of the selected element. Syntax: It sets the content of matched element. $(selector).html(content) text() Method: This m
1 min read
How to combine Bold and Italic in CSS ?
In this article, we will learn how to combine bold and italic in CSS. Italic and bold are two text styles that are utilized to emphasize or draw attention to words or phrases. Bold text gives a darker appearance to the text while italic text adds a cursive effect. SyntaxBelow are the 2 possible approaches where the bold and italic text styles can b
3 min read
Article Tags :