如何用CSS给非固定宽度元素hover时增加6px宽度？

针对自适应宽度（非固定值）的元素，要实现hover时宽度增加6px的效果，transform: scale()无法满足需求（它是比例缩放，无法实现固定像素增量），推荐以下两种可靠方案：

方案一：利用左右内边距（padding）实现（占据布局空间） #

这种方法通过修改元素的左右内边距，让总宽度增加6px，同时支持平滑过渡，且不影响内容布局（只要初始内边距合理）。

/* 基础样式：确保元素为可设置内边距的块级/行内块级元素 */
.adaptive-width-element {
  display: inline-block; /* 替换为 block 也可，根据布局需求调整 */
  padding: 8px 0; /* 上下内边距按需设置，左右初始为0 */
  background-color: #e0e0e0;
  transition: padding 0.3s ease; /* 过渡内边距变化，实现平滑动画 */
}

/* hover状态：左右各增加3px内边距，总宽度增加6px */
.adaptive-width-element:hover {
  padding-left: 3px;
  padding-right: 3px;
}

如果元素原本已有左右内边距，只需在hover时对应增加3px即可：

.adaptive-width-element {
  display: inline-block;
  padding: 8px 12px; /* 初始左右内边距12px */
  transition: padding 0.3s ease;
}

.adaptive-width-element:hover {
  padding-left: 15px; /* 12+3 */
  padding-right: 15px;
}

方案二：利用box-shadow实现（不占据布局空间） #

如果不需要元素宽度增加后推动周围元素，可使用box-shadow模拟宽度增加（阴影不占据布局流空间）：

.adaptive-width-element {
  display: inline-block;
  padding: 8px;
  background-color: #e0e0e0;
  transition: box-shadow 0.3s ease;
}

.adaptive-width-element:hover {
  /* 左右各添加3px的实色阴影，模拟宽度增加6px */
  box-shadow: 3px 0 0 #e0e0e0, -3px 0 0 #e0e0e0;
}

为什么transform/transition之前未生效？ #

transform: scaleX()是按比例缩放元素，无法实现固定像素值的宽度增量（因为自适应元素的初始宽度不固定，比例缩放后的增量也不固定）。如果你的需求是固定增加6px，transform的scale方案不适用。

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