Problem: Hover after the font bold, element width changes will affect the content behind, look shaky

Baidu see the solution, take a study

<style>
    li {
        display: inline-block;
        font-size: 0;
    }

    li a {
        display: inline-block;
        text-align: center;
        font: normal 16px Arial;
        text-transform: uppercase;
    }

    a:hover {
        font-weight: 1000;
    }

    a::before {
        display: block;
        content: ' ';
        font-weight: bold;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        color: red;
    }
</style>
 <ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>
Copy the code

After considering, the principle is to give a pseudo-element with the same content, first set the hover effect for the pseudo-element, and then hide the pseudo-element through the visibility and overflow. One of these two styles should be used

The default pseudo-element precedes the A tag

Combined with the display: block;

Add height: 0;

Then hide by visibility or overflow

After the hover, the width does not change, because the pseudo-element originally extends the width to the width after the hover

The guy who figured it out was awesome