CSS实现元素弹出变色效果时如何避免文本偏移？

问题根源在于hover时动态添加padding会改变元素的盒模型尺寸，结合transform: scale()会让文本出现偏移。要解决这个问题，核心是保证hover前后元素的内容布局区域稳定，同时实现视觉上的padding效果。以下是两种可行方案：

方案1：初始用负margin抵消padding，hover时移除负margin #

提前给元素加上目标padding，同时用负margin抵消padding带来的宽度变化，让初始状态下元素的实际占位和文本位置与需求一致。hover时移除负margin，配合scale实现弹出效果，此时padding已经存在，文本不会偏移。

修改后的CSS代码：

* {
  box-sizing: border-box; 
}

.pop-out {
    position: relative;
    /* 提前设置hover时需要的padding */
    padding-left: 1rem;
    padding-right: 1rem;
    /* 用负margin抵消padding的宽度，保持初始占位和原状态一致 */
    margin-left: -1rem;
    margin-right: -1rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out, margin 0.2s ease-in-out;

    &:hover {
        cursor: pointer;
        background-color: white !important; 
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
        border-radius: 10px;
        /* 移除负margin，让padding生效，视觉上出现内边距 */
        margin-left: 0;
        margin-right: 0;
    }
}

#wrapper {
  margin-left: 50px;
  display: flex; 
  justify-content: center; 
}

#my-element {
  background-color: gray;
  width: 200px; 
  flex: 0 0 auto; 
}

方案2：用伪元素模拟padding效果 #

利用伪元素在hover时生成左右的“padding区域”，不改变原元素的盒模型，这样文本位置始终稳定。

修改后的CSS代码：

* {
  box-sizing: border-box; 
}

.pop-out {
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-radius 0.2s ease-in-out;
    /* 让伪元素相对于本元素定位并隐藏溢出 */
    overflow: hidden;

    &:hover {
        cursor: pointer;
        background-color: white !important; 
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        transform: scale(1.1);
        border-radius: 10px;
    }

    /* 伪元素模拟左侧padding */
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: inherit;
        transition: width 0.2s ease-in-out;
    }

    /* 伪元素模拟右侧padding */
    &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: 0;
        background-color: inherit;
        transition: width 0.2s ease-in-out;
    }

    &:hover::before,
    &:hover::after {
        width: 1rem;
    }
}

#wrapper {
  margin-left: 50px;
  display: flex; 
  justify-content: center; 
}

#my-element {
  background-color: gray;
  width: 200px; 
  flex: 0 0 auto; 
}

方案特点 #

• 方案1更直接，利用盒模型的margin和padding抵消，适合需要真实padding（比如文本需要和边缘保持距离）的场景。
• 方案2用伪元素模拟，不会改变原元素的盒模型尺寸，适合仅需要视觉padding效果的场景。

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