10秒后隐藏生成的CSS内容

Question

我在内容之前添加了跨度，以使用 Font Awesome 创建问号图标，我需要在 10 秒后隐藏所有生成的 CSS 内容（之前），仅使用 CSS 代码而不使用 html 代码。

.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;
}

Answer 1

给它一个持续10秒的动画，然后设置显示：无。

.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: disappear 10s linear forwards;
}

@keyframes disappear {
  to {
    display: none;
  }
}

<div class="Alert">
  <span>Sme text</span>
</div>