仅悬停css时带有字母间距的居中文本[重复]答案

【问题标题】：center text with letter-spacing on hover only css [duplicate]仅悬停css时带有字母间距的居中文本[重复]
【发布时间】：2020-02-24 08:42:35
【问题描述】：

当我悬停按钮时我会尝试一些东西。目前这是我的代码

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

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

&lt;button class="btn"&gt;My bouton&lt;/button&gt;

问题是，当我将按钮悬停时，文本会展开，按钮也会在右侧展开。我想让按钮不展开（保持原始大小），只有文本里面展开和居中，没有放置宽度大小，因为我希望它作为组件（我永远不会知道文本的大小。）仅在 css 中。

我找到的唯一一种方法是添加一个过来的数据属性，但我不喜欢这种方式，因为我重复了我的文本 2 次。

对你来说，可能只有 CSS 吗？如果是的话怎么办？非常感谢

【问题讨论】：

您可以这样做的一种方法是使用 jQuery / javascript。你对这个想法持开放态度吗？因为您需要计算每个动态内容的宽度，因此，javascript / jQuery 将使用最少的代码更容易。
准确地说，用javascript我可以做到，如果可能的话，我想只在css中做
当您必须计算当前宽度时，不要认为 css 可能。如果你想在 jquery 中得到答案，我可以发布它。我已经对其进行了测试，并且可以在 Jquery 中使用。但由于它只有 CSS，我认为它不可能。

标签： html css text behavior

【解决方案1】：

隐藏原始按钮文本并在使用以下 CSS 规则之后/之前使用它。

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

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

.btn::after{
  content: 'My Button';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: purple;
  transition: 0.5s;
}

&lt;button class="btn"&gt;My bouton&lt;/button&gt;

【讨论】：

谢谢，正如我在描述中所说，我使用了这种方法，使用数据属性，它让我重复我的文本2次（DRY）
是的，我认为这对于纯 CSS 是不可能的。通过使用 scale 我们可以达到接近上述效果的效果。 Demo
谢谢，我想用这种方式，但是，这不是设计师想要的

【解决方案2】：

在文本元素上使用绝对定位并将其设置为相对于按钮元素

编辑：

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

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

span {
  //position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

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

【讨论】：

请添加一个例子。
试试上面的方法，但宽度是固定的。您可以进一步添加一个 div 层并使其具有响应性
你试过你的代码了吗？我已经把它放在一个 sn-p :)
谢谢，在你给我看之前我已经试过了，问题是，你修复了一个 with，我想要它作为组件，我永远不会现在的文本大小。

【解决方案3】：

最简单的解决方案是给按钮一个宽度......但你不希望那样。

作为替代方案，您可以使用padding-left 和padding-right。

在正常状态下，你给它一些内边距，在悬停状态下，把它恢复到 15px。

注意：改变文字长度会影响宽度，那么内边距也需要调整...

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

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

&lt;button class="btn"&gt;My bouton&lt;/button&gt;

【讨论】：

增加文本按钮宽度时也会增加。
@LinkinTED 那么与添加width没有什么不同。之所以不想使用width，是因为内容是动态的，不想手动添加。
这是如何居中的？
@robotik，好评，改了答案
这不适用于任何文本

【解决方案4】：

只要按钮宽度由文本宽度决定，您就只能尝试操作填充以使其再次适合。

如果根据其父级或固定宽度为按钮指定宽度没有问题，您可以试试这个：

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

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

&lt;button class="btn"&gt;My bouton&lt;/button&gt;

【讨论】：

OP 要求没有固定宽度的解决方案...