使用CSS关键帧动画修改div内容失效问题排查

• CSS的content属性仅能在伪元素（如::before、::after）上生效，无法直接作用于普通HTML元素（比如你的<div id="neon-sign">）。直接给div设置content或在关键帧中修改它，浏览器不会识别渲染。

将文本内容的动画逻辑转移到div的伪元素上，修改后的代码如下：

CSS代码 #

:root {
  --accent-color: #ff6f15; /* 补充变量定义，避免未定义报错 */
}

#neon-sign {
  position: relative;
  font-size: 12em;
  width: 100%;
  text-align: center;
  letter-spacing: 5px;
  line-height: 0.80em;
  font-family: 'Warnes', cursive;
  -webkit-box-reflect: below 0 linear-gradient(transparent, #ff6f150e);
  font-weight: 300;
}

/* 用伪元素承载文本内容与动画 */
#neon-sign::before {
  content: 'Hola'; /* 初始文本 */
  color: var(--accent-color);
  animation: changetext infinite 8s, neonanimate 5s linear infinite;
}

@keyframes changetext {
  0% {
    content: 'Hola';
  }
  20% {
    content: 'Hello';
  }
  40% {
    content: 'Salut';
  }
  60% {
    content: 'Ciao';
  }
  80% {
    content: 'Привет';
  }
  100% {
    content: '你好';
  }
}

/* 补充neonanimate动画基础实现（原代码未给出） */
@keyframes neonanimate {
  0%, 100% {
    text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color), 0 0 30px var(--accent-color);
  }
  50% {
    text-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--accent-color), 0 0 15px var(--accent-color);
  }
}

HTML代码 #

<div id="neon-sign"></div>

• 伪元素::before/::after是CSS中唯一支持content属性的对象，通过它来承载动态文本内容。
• 将原div上的color和animation属性移到伪元素上，div仅保留容器相关样式即可。
• 补充了--accent-color变量定义和neonanimate动画的基础实现，避免原代码中存在的未定义问题。

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