hover字体加粗效果，宽度变化的问题

问题：hover悬停后字体加粗，元素的宽度发生变化会影响后面的内容，看起来一抖一抖的

百度看到的解决方案，拿来研究一下

<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>

琢磨了一下，原理是给了一个同样内容的伪元素,先给伪元素设置hover之后的效果,然后把伪元素通过visibility和overflow隐藏了,这两个样式应该用一个就行

默认伪元素在a标签前面

加上display: block;

加上height: 0;

然后通过visibility或overflow隐藏

hover之后就宽度就不会变化了，因为一开始伪元素已经把宽度撑开到hover之后的宽度了

能想出这种办法的人也是厉害