：before之前不继承父级的宽度

Question

我正在尝试创建一个在鼠标悬停时变形为粗体文本的文本。

为了达到这个目的，我创建了不可见的粗体文本（为了给容器提供正确的宽度，当文本在鼠标移动时改变其重量时避免跳跃）并且我只为{{1}中的:before伪元素设置动画转到font-weight: 200;。

演示：http://jsfiddle.net/ky55D/

启用了文字的演示：http://jsfiddle.net/ky55D/1/（由于某些原因，无论是否有font-weight: 700;，它们都不匹配。）

问题是我的例子中的第二个单词“Gravida”转到下一行，而不是放在其父级之上。将更高:hover添加到width会有所帮助，但我不知道适当的宽度是多少。 .link:before适用于2个字。 200%适用于3个单词等。

如果能用CSS修复这个想法吗？

Answer 1

根据KISS范式，我会改变方法：）

• 在正常状态下使用transparent text-shadow;

• 将其设为:hover状态。

文字显得更大胆，但整体宽度不会改变，也不会移动文字。

演示：http://jsfiddle.net/tQd6g/1/

---

修改：将display: inline-block;添加到您的a元素中，因为它现在作为inline显示的对象工作，这可能不是您想要的目的：

演示：http://jsfiddle.net/ky55D/2/