CSS循环实现打字机动画时如何为每个::after伪元素设置不同颜色

• ::after伪元素完全支持单独配置不同颜色，它的样式是和所属的宿主元素绑定的，只要为每段承载打字内容的宿主元素配置独立的选择器，就能给对应::after设置差异化的color值，原有打字动画的逻辑不需要改动。

具体实现方法 #

常规纯CSS打字机动画是把展示文本存在::after的content属性里，只要把每段文本拆成独立的DOM元素，分别加类名区分即可，示例代码如下：

/* 第一行文本样式 */
.typing-line-1::after {
  content: "第一行展示的文本内容";
  color: #2f54eb; /* 自定义蓝色 */
  /* 保留原有动画、光标宽度、字间距等属性即可 */
  animation: typing 3s steps(22) forwards, blink 0.8s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid currentColor;
  position: absolute;
  left: 0;
  top: 0;
}
/* 第二行文本样式 */
.typing-line-2::after {
  content: "第二行展示的文本内容";
  color: #52c41a; /* 自定义绿色 */
  /* 动画属性和第一行保持统一，只改颜色和延迟时间即可 */
  animation: typing 3s steps(22) 3.5s forwards, blink 0.8s step-end infinite;
  /* 剩下的布局属性和第一行一致，调整top值做行间距偏移 */
}

注意：单个DOM元素只能生效一个::after伪元素，不要尝试在同一个元素上叠加多个伪元素实现多段文本，拆成独立行元素是维护成本最低的方案。

Angular Ionic 框架适配建议 #

• 样式尽量写在当前组件的样式文件内，利用Angular默认的视图封装避免样式污染。如果需要覆盖Ionic内置组件的默认样式，记得给打字机模块加专属父类名做命名空间，比如.custom-typing-card .typing-line-1::after，避免全局样式冲突。
• 如果打字内容是动态变化的，不要把文本硬编码在CSS的content属性里，可以给宿主元素绑定data-content自定义属性，CSS里通过content: attr(data-content)读取内容；颜色也可以直接通过Angular的[style.color]绑定到宿主元素上，::after默认会继承宿主元素的color值，连单独给伪元素写颜色的步骤都能省。
• 多段文本的延迟、时长、颜色配置都可以存在数组里，配合*ngFor循环渲染DOM，按索引计算动画延迟时间，比纯CSS硬编码每一行的样式灵活很多。Ionic双端对CSS伪元素动画的兼容性很好，只要不叠加复杂的滤镜、阴影属性，基本不会出现掉帧问题。

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