::具有不透明度 属性 的首字母伪元素不起作用

Question

好吧，我已经显示了链接的第一个字母，当我悬停时，我希望其他字母显示为过渡（以某种方式动画）。

首先，我使所有字母不可见，然后使用 ::first-letter 伪元素，我使用 visibility: visible 使第一个字母可见。当我悬停它时，会出现其他字母，但它不是动画的，我想添加不透明度。

我将所有字母的不透明度设置为 0，并在 ::first-letter 中将不透明度设置为 1，我期望的是使过渡有效，但事实并非如此。

.navbarlist li a {
  visibility: hidden;
  transition: all 0.5s ease;
  opacity: 0;
}
.navbarlist li a::first-letter {
  transition: all 0.5s ease;
  visibility: visible;
  opacity: 1;
}
.navbarlist li a:hover {
  visibility: visible;
  transition: all 0.5s ease;
  opacity: 1;
}

这段代码的所有字母都是不可见的，我想知道为什么它不起作用。有什么建议吗？

Answer 1

::首字母伪元素只能用于certain properties but opacity & visibility aren't one of them。

您必须将文本拆分为多个跨度标签才能获得所需的输出