能否仅用CSS transform属性调整元素宽度且不拉伸内容？

当然可以实现预期效果。问题出在scaleX默认以元素中心为变换原点，且会缩放元素内的所有内容（包括文本）。通过以下调整，既能用transform实现和#a:hover完全一致的效果，又能解决你遇到的两个问题：

修改后的代码 #

div#a, div#b {
  width: 100px;
  height: 30px;
  position: relative; /* 为伪元素定位做准备 */
}

div#a {
  background: #ccc;
}

div#a:hover {
  width: 150px;
}

/* 用伪元素承载背景，文本独立在父元素中 */
div#b::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ccc;
  transition: transform 0.3s; /* 可选，添加过渡动画让效果更平滑 */
}

div#b:hover::before {
  transform: scaleX(1.5);
  transform-origin: left center; /* 设置变换原点为左侧中心 */
}

/* 确保文本不受缩放影响，层级高于背景伪元素 */
div#b span {
  position: relative;
  z-index: 1;
  padding: 0 8px; /* 可选，调整文本与容器边缘的间距 */
}

<div id="a">Test1</div>
<div id="b"><span>Test2</span></div>

关键调整说明 #

• 解决文本拉伸问题：将背景和文本分离，用伪元素::before承载灰色背景，文本放在独立的<span>标签中。hover时仅缩放背景伪元素，文本保持原有大小和比例，不会被拉伸。
• 解决从中心扩展问题：通过transform-origin: left center将变换原点设置为元素的左侧中心，这样执行scaleX(1.5)时，背景伪元素会从左侧向右扩展，和#a:hover直接修改宽度的视觉效果完全一致。

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