如何仅用CSS在10秒后隐藏Font Awesome生成的span::before伪元素内容

要仅用CSS实现10秒后隐藏这个伪元素，你可以借助CSS关键帧动画来完成，完全不需要修改HTML代码。核心思路是通过设置动画延迟，在指定时间后改变伪元素的可见性状态：

修改后的完整CSS代码 #

.Alert span::before{
  font-family: "FontAwesome";
  font-size: 30px;
  content: "\f128";
  white-space: pre;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: white;
  background-color: #9e9e9e;
  position: fixed;
  left: 50%; 
  top: 0%; 
  transform: translate(-50%, -50%);
  transition: .2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 新增动画属性 */
  animation: hideQuestionMark 0.2s ease 10s forwards;
}

/* 定义隐藏动画的关键帧 */
@keyframes hideQuestionMark {
  to {
    opacity: 0;
    visibility: hidden;
    /* 可选：如果需要彻底清除图标内容，可添加 content: ""; */
  }
}

代码说明 #

• animation: hideQuestionMark 0.2s ease 10s forwards;：
  • hideQuestionMark：绑定的关键帧名称
  • 0.2s：动画执行时长，和你原有transition时长保持一致，过渡更自然
  • 10s：动画延迟时间，即10秒后才开始执行隐藏动作
  • forwards：动画结束后保持最后一帧的状态，不会回弹到初始显示状态
• 关键帧中用opacity: 0实现渐隐效果，visibility: hidden让元素彻底不可交互（避免伪元素占位置或遮挡下层内容），如果需要直接清空图标内容，也可以在to里加上content: "";

这样设置后，页面加载10秒后，这个问号图标就会平滑隐藏，完全符合你的需求。

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