css - 这个 coDrops 链接效果可以对元素中的文本起作用吗？

Question

我正在尝试从此处http://tympanus.net/codrops/2013/08/06/creative-link-effects/在段落文本中的单词上模拟 CSS 动画。而且我绝对没有成功。我想知道是否不支持伪元素或者我使用它们的方式是错误的。我已经明确测试并确认元素支持悬停。我还看到了一些悬停时文本上的 CSS 动画示例。但我似乎无法让我的例子起作用。

这是codepen http://cdpn.io/bjGxl上的代码

谢谢你。

Answer 1

你的CSS中有一个额外的逗号

.highlight:hover::before,
.highlight:focus::before,{
    max-width: 100%;
}

应该

.highlight:hover::before,
.highlight:focus::before{
    max-width: 100%;
}

.highlight:focus 可以被删除，因为跨度不能有焦点。

http://cdpn.io/uEiKf