本文讲解如何通过容器约束与布局优化，解决 CSS 打字动画中因 content 动态切换不同长度文本而导致光标（伪元素）水平位置跳动的问题，确保动画始终稳定居中或对齐。

本文讲解如何通过容器约束与布局优化，解决 css 打字动画中因 `content` 动态切换不同长度文本而导致光标（伪元素）水平位置跳动的问题，确保动画始终稳定居中或对齐。

在实现 CSS 驱动的打字动画时，一个常见却容易被忽视的问题是：当 ::before 伪元素通过 @keyframes 切换不同长度的 content（如 "FrontEnd Developer" vs "Freelancer"），其渲染宽度实时变化。若该伪元素父级（如 <span></span>）采用 display: flex + justify-content: center 布局（如原 .hometxt），浏览器会不断重新计算并居中该动态宽元素——结果就是光标（::after）随文本变短/变长而左右漂移，破坏视觉一致性。

根本原因在于：居中行为作用于内容宽度本身，而非固定容器。因此，解决方案不是强行设 min-width（对 content 无效），而是将动画区域“锚定”在一个宽度可控、对齐方式稳定的上下文中。

✅ 推荐做法：

1. 新增外层容器（如 .main），设定明确宽度（建议响应式，如 max(300px, 25vw)）并居中自身（margin-inline: auto）；
2. 移除 .hometxt 的 display: flex 及居中属性，改用常规块级流布局；
3. 将 <span></span> 放入独立 <div> 包裹层（语义清晰且便于控制），使其 <code>::before 和 ::after 基于该 div 的宽度计算定位；
4. 关键：::after 光标需依赖父容器宽度 → 当父 div 宽度固定，width: calc(100% + 0.8rem) 和 right: -0.5rem 才能稳定生效。

以下是优化后的完整代码结构：

<main class="main">
  <div class="hometxt">
    <h1>Hi, I am</h1>
    <p>Reyyan Yaqub</p>
    <div class="typing-container">
      <span></span>
    </div>
  </div>
</main>

.main {
  width: max(300px, 25vw); /* 响应式最小宽度保障 */
  margin-inline: auto;
}

.hometxt {
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center; /* 仅垂直居中，不干扰水平 */
  justify-content: center;
  gap: 1.4rem;
}

.typing-container {
  position: relative;
  text-align: center; /* 视觉居中，不影响伪元素定位逻辑 */
}

.hometxt span::before {
  content: "FrontEnd Developer";
  font-size: 2.25rem;
  font-weight: 500;
  animation: text 20s infinite;
  display: inline-block; /* 确保 content 可被 width 计算 */
}

.hometxt span::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 3rem;
  width: calc(100% + 0.8rem); /* 此处 100% 指 .typing-container 宽度 */
  background-color: white;
  border-left: 2px solid black;
  animation: cursor 0.8s infinite, typing 20s steps(14) infinite;
  right: -0.5rem;
}

/* 动画保持不变 */
@keyframes cursor {
  to {
    border-left-color: transparent;
  }
}

@keyframes text {
  0%, 20% { content: "FrontEnd Developer"; }
  21%, 40% { content: "PHP Developer"; }
  41%, 60% { content: "React/Next Developer"; }
  61%, 80% { content: "Web Designer"; }
  81%, 100% { content: "Freelancer"; }
}

@keyframes typing {
  10%, 15%, 30%, 35%, 50%, 55%, 70%, 75%, 90%, 95% {
    width: 0;
  }
  5%, 20%, 25%, 40%, 45%, 60%, 65%, 80%, 85% {
    width: calc(100% + 0.8rem);
  }
}

⚠️ 注意事项：

• steps(14) 中的 14 应与最长文本（如 "FrontEnd Developer" 共 19 字符？）的字符数匹配，建议统一按最长文本长度设置步数，避免末尾跳帧；可改用 steps(N, end) 提升精度。
• 若需严格水平居中动画文本，可在 .typing-container 上设置 width: fit-content + margin: 0 auto，但需确保其父容器允许此行为；当前方案更推荐固定宽度容器，稳定性更高。
• 避免在 ::before 上直接使用 text-align 或 flex，伪元素不支持所有布局属性，display: inline-block 是安全选择。

通过将动态内容封装进宽度受控的容器，并剥离弹性居中对宽度的依赖，即可一劳永逸地消除打字动画的位置抖动，让视觉焦点始终稳定、专业。