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

Question

我已经显示了链接的第一个字母，当我悬停时，我希望其他字母显示过渡(动画方式)。

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

我将所有字母的不透明度设置为0，在::首字母中，我将不透明度设置为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

::first-letter伪元素只能用于某些属性，但不透明&可见性不是其中之一。

你必须把你的文本分割成多个span标签来达到你想要的输出