如何用CSS避免React分类选择器hover时文本偏移？

问题核心是：字体权重从500变为800时，元素实际宽度会增加，而flex布局的justify-content: space-between会重新分配剩余空间，导致其他标签位移。下面是几种靠谱的修复方案：

方案一：固定标签最小宽度 #

给每个分类标签设置足够的min-width，让元素宽度提前容纳加粗后的文字，hover时宽度不变就不会触发布局偏移。

修改后的CSS：

.skills-category-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}

.category-label {
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    /* 根据你实际的文字内容调整这个值，确保能容纳加粗后的宽度 */
    min-width: 90px;
    text-align: center; /* 可选，让文字居中更美观 */
}

.category-label:hover {
    font-weight: 800;
    text-decoration: underline;
}

优点是简单直接，缺点是需要手动估算宽度，文字内容变化时要重新调整。

方案二：用伪元素预占加粗宽度 #

通过伪元素渲染和原标签相同的文字，设置为加粗且透明，让标签元素的宽度默认就是加粗后的尺寸，hover时只改变原文字的权重，不会改变元素宽度。

修改后的CSS：

.skills-category-selector {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 12px;
}

.category-label {
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    position: relative;
    display: inline-block;
}

/* 伪元素渲染加粗文字，透明占位 */
.category-label::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-weight: 800;
    opacity: 0;
}

.category-label:hover {
    font-weight: 800;
    text-decoration: underline;
}

对应的React元素需要添加data-text属性，把标签文字传进去：

<span className="category-label" data-text="前端开发">前端开发</span>
<span className="category-label" data-text="后端开发">后端开发</span>

优点是无需手动计算宽度，适配不同文字内容，视觉效果自然；缺点是需要给每个标签加data-text属性。

方案三：用transform模拟加粗（不推荐） #

如果不想调整布局，可以用transform: scaleX()模拟字体加粗的视觉效果，但这种方法会让文字轻微变形模糊，仅作为临时备选：

.category-label:hover {
    /* 缩放比例根据需求调整 */
    transform: scaleX(1.05);
    text-decoration: underline;
}

内容的提问来源于stack exchange，提问作者christiannc