我正在尝试创建一个文本,该文本在鼠标悬停时会变成更粗的文本。
为了实现这一点,我创建了不可见的粗体文本(为容器提供正确的宽度,当文本在鼠标悬停时改变其重量时避免跳跃)并且我只为:before
伪元素从font-weight: 200;
to 设置动画font-weight: 700;
。
演示:http: //jsfiddle.net/ky55D/
启用文本的演示:http: //jsfiddle.net/ky55D/1/(由于某种原因,无论有无,它们都不匹配:hover
)。
问题是我的示例中的第二个单词“Gravida”转到下一行,而不是放在其父级的顶部。增加更高width
的.link:before
帮助,但我不知道合适的宽度是多少。200%
适用于 2 个单词。300%
适用于 3 个单词等。
如果仅使用 CSS 可以解决此问题,有什么想法吗?