::first-letter伪元素设置opacity后transition过渡效果不生效求助

问题原因 #

• opacity 属性作用于元素整体时，会叠加作用于其内部所有内容包括伪元素。你给 a 标签整体设置 opacity: 0，就算给 ::first-letter 单独设置 opacity: 1，最终首字母的实际透明度为 0 * 1 = 0，所以所有内容都会不可见。
• 你同时混用了 visibility 和 opacity 两个控制显隐的属性，冗余设置会增加样式冲突概率，且 transition 不需要在 hover 状态重复声明，只需要在元素默认状态声明即可全局生效。

解决方法 #

换更简洁的实现思路：不修改父元素 a 的整体透明度，通过控制文字颜色的透明度实现效果，同时注意要将 a 标签设为行内块元素，保证 ::first-letter 伪元素能正常生效：

.navbarlist li a {
  /* 设为行内块，保证::first-letter规则生效 */
  display: inline-block;
  /* 默认文字全透明，色值替换为你实际需要的链接颜色 */
  color: rgba(0, 0, 0, 0);
  /* 仅需在默认状态声明过渡规则 */
  transition: all 0.5s ease;
}
.navbarlist li a::first-letter {
  /* 首字母默认不透明 */
  color: rgba(0, 0, 0, 1);
}
.navbarlist li a:hover {
  /* hover时整段文字恢复不透明 */
  color: rgba(0, 0, 0, 1);
}

内容的提问来源于stack exchange，提问作者Mert Uygur