仅在css上带有字母间距的中心文本

Question

当我将鼠标悬停在按钮上时，我会尝试一些操作。当前，这是我的代码

.btn {
  border:solid 1px purple;
  color:purple;
  background: white;
  padding:10px 15px;
  text-align: center;
  transition: .5s;
}

.btn:hover{
  letter-spacing: 1px;
}

<button class="btn">My bouton</button>

问题是，当我将鼠标悬停在按钮上时，文本会展开，按钮也会在右侧展开。我想使按钮不展开（保持原始大小），仅将文本内的文本展开并居中，而不放置宽度大小，因为我希望将其作为组件（我永远都不知道文本的大小。）全部仅在CSS中。

我发现的唯一方法是添加一个过来的数据属性，但我不喜欢这种方式，因为我两次重新输入了文本。

您可能只有CSS吗？如果是，怎么办？非常感谢

Answer 1

最简单的解决方案是为按钮设置宽度...但是您不想要那样。

或者，您可以使用padding-right播放。

在正常状态下，您可以对其进行更多填充，在悬停状态下，将其恢复为15px。

注意：更改文本长度也会影响填充...

.btn {
  border:solid 1px purple;
  color:purple;
  background: white;
  padding:10px 24px 10px 15px;
  text-align: center;
  transition: .5s;
}

.btn:hover{
  letter-spacing: 1px;
  padding-right: 15px;
}

<button class="btn">My bouton</button>

Answer 2

在文本元素上使用绝对定位并相对于按钮元素进行设置