CSS 字体加粗，导致布局宽度改变怎么处理？

在写Tab组件时（每一项的数据都从后台获取，width宽度不定，使用padding隔开），下划线时通过计算每一项的宽度实现滑动效果，字体加粗标记当前项，且当鼠标hover时，对应项的字体也加粗，此时由于字体加导致粗宽度变化了，所以滑块位置也偏移了，想到用鼠标的mouseenter和mouseleave重新计算宽度，但是比较麻烦，有没有好的方法处理，使字体加粗不影响宽度的改变？

在网上查阅了很多资料，发现用伪元素处理效果最好。下面是一个demo

      ul > li {
        display: flex;
        padding: 4px 10px;
        font-size: 16px;
        border: 1px solid red;
      }
      ul > li::after {
        display: block;
        content: attr(title);
        font-weight: bold;
        visibility: hidden;
        height: 1px;
        color: transparent;
        margin-bottom: -1px;
        overflow: hidden;
      }
      ul > li:hover {
        font-weight: bold;
      }

    <ul>
      <li title="内容11111">内容11111</li>
      <li title="内容222222222222">内容222222222222</li>
      <li title="内容333">内容333</li>
    </ul>

demo效果图：

Tab组件使用伪元素后的效果：