hover添加letter-spacing时如何保持按钮宽度？求CSS解决方案

当然可以用纯CSS解决这个问题！我来分享一个通用的方案，不需要固定宽度，不管按钮文本长短都能完美适配，完全不用JavaScript。

问题根源 #

当你直接给按钮的文本添加letter-spacing hover效果时，文本的宽度会随着字符间距增加而变大，而按钮是inline-block元素，会自动适应内容宽度，所以hover时按钮会跟着扩展。我们需要让字符间距的变化不影响按钮的宽度。

解决方案：用伪元素模拟文本效果 #

核心思路是用伪元素显示带间距的文本，同时隐藏原文本，这样按钮的宽度始终由原文本的尺寸决定，hover时不会改变。

完整代码示例 #

HTML

<button type="button" class="btn btn-primary btn-large" data-text="Lorem">Lorem</button>
<p>更长的文本也能正常工作：</p>
<button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum">Lorem Ipsum</button><br><br>
<button type="button" class="btn btn-primary btn-large" data-text="Lorem Ipsum Dolor">Lorem Ipsum Dolor</button>

CSS

.btn {
  display: inline-block;
  text-align: center;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  /* 关键：让按钮成为伪元素的定位容器 */
  position: relative;
  overflow: hidden; /* 防止伪元素超出按钮边界 */
}

.btn-primary {
  background-color: #8065F1;
  color: #FFFFFF;
}

.btn-large {
  border-radius: 32px;
  box-shadow: 0 2px 80px 0 rgba(74, 74, 74, 0.23);
  padding: 0.25rem 3rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  /* 不再需要固定min-width */
}

/* hover时用伪元素显示带字符间距的文本 */
.btn:hover::before {
  content: attr(data-text); /* 从data-text属性获取按钮文本 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让伪元素文本居中 */
  letter-spacing: 4px;
  color: #FFFFFF; /* 和原文本颜色保持一致 */
}

/* 隐藏原文本，只显示伪元素的带间距文本 */
.btn:hover {
  color: transparent;
}

方案说明 #

1. data-text属性：用来存储按钮的文本内容，方便伪元素动态获取，避免重复写文本内容。
2. 相对定位的按钮：让伪元素可以相对于按钮进行绝对定位，确保文本始终在按钮中心位置。
3. 伪元素hover效果：hover时生成带letter-spacing的文本，同时隐藏原文本，视觉上呈现字符间距变化的效果，但按钮宽度由原文本决定，不会改变。

这个方案完全适配任意长度的按钮文本，不需要计算固定宽度，是纯CSS的完美解决方案。

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