Question

我想要一个<a>在段落的第一行中具有过渡的悬停效果，以便为::first-line设置字母间距样式。
在Firefox中，当您将鼠标悬停时，这会破坏letter-spacing！

::第一行的样式为letter-spacing
如果第一行的<a>适用于letter-spacing的样式（在Firefox中而不是在Chromium中），则会破坏:hover。
您可以通过添加a:hover::first-line { letter-spacing: inherit; }
但是，如果有过渡，它将再次中断！

这表明了这一点：codepen或此代码段：

p {
  font-size: larger;
  letter-spacing: 0.1em;
}
p::first-line {
  font-variant: small-caps;
  letter-spacing: 0.2em;
}
a {
  color: red;
  text-decoration: underline;
}

/* Break letter-spacing */
a:hover {
  color: blue;
}

/* Work around */
.example-2 a:hover::first-line {
  letter-spacing: inherit;
}

/* Break it again */
.example-3 a {
  transition: color 2s;
}
.example-3 a:hover::first-line {
  letter-spacing: inherit;
}

<p><a>letter-spacing with ::first-line is buggy</a> when combined with hover effects. Etc. etc. etc.</p>
<p class="example-2">Lorem ipsum <a>there's a workaround</a> Etc. etc. etc.</p>
<p class="example-3">Lorem ipsum <a>which breaks when you use a transition</a> sit amet, consectetuer adipiscing elit? Aenean commodo ligula eget dolor? Aenean massa! Cum sociis natoque penatibus et magnis dis parturient  montes, nascetur ridiculus mus? Assuming we are in the body of the paragraph, <a>This works fine, the bug is confined to ::first-line pseudo-elements</a>. Etc. etc. etc.</p>

有人知道我如何解决这个问题，或者看到我错过的东西吗？谢谢。

在Firefox 63.0.1（64位）（可能会破坏）和Chromium 68.0.3440.106（正式版本）（64位）（正在运行）中进行测试

a：悬停效果在Firefox中:::第一行上打破字母间距

0 个答案: