设置字体加粗后，元素宽度改变，影响布局

来自 blog.csdn.net/guizi0809/a…

背景

在一个flex布局中，各元素没有设置固定的宽度，仅适应当前的内容宽度。通过设置margin和padding来进行排列。 当修改字体的 font-size、font-weight等情况时，内容会撑大元素的宽度，导致布局发生变化。

解决方法

1. 给每个元素设置固定的宽度，内容发生变化时，控制内部内容排版。
2. 使用伪类元素占位：

//给元素设置伪类与添加自定义属性，属性值为元素内容。
p:after {
    display: block;
    content: attr(data-title);
    font-weight: 600;
    visibility: hidden;
    height: 1px;
    color: transparent;
    margin-bottom: -1px;
    overflow: hidden;
}

p:hover {
    font-weight: 600;
}