如何让CSS/HTML/JS打字动画忽略光标元素的宽度？

方法1：用CSS伪元素实现闪烁光标（最省心） #

直接把原来的光标字符从文本里删掉，改用CSS伪元素生成光标——伪元素绝对定位后不会占用文档流宽度，完全不影响文本的居中计算。

修改后的代码示例：

HTML

<!-- 去掉原来的|字符，只保留动态文本容器 -->
<span id="typed-text"></span>

CSS

#typed-text {
  position: relative; /* 给伪元素做定位参考 */
  text-align: center;
}

/* 用:after伪元素生成光标 */
#typed-text::after {
  content: "|";
  position: absolute; /* 脱离文档流，不占宽度 */
  animation: blink 1s infinite;
  margin-left: 2px; /* 可选，微调光标和文本的间距 */
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

JavaScript

只需要专注处理#typed-text里的文本内容，不用管光标逻辑——光标完全由CSS控制，不会干扰文本的输入/删除动画。

方法2：独立光标容器+绝对定位 #

如果不想改动原来的JS文本生成逻辑，就把光标单独放在一个span里，用绝对定位让它脱离文档流：

HTML

<div class="typed-wrapper">
  <span id="dynamic-text"></span>
  <span id="blink-cursor">|</span>
</div>

CSS

.typed-wrapper {
  position: relative;
  text-align: center;
}

#blink-cursor {
  position: absolute;
  animation: blink 1s infinite;
  left: 100%; /* 让光标紧贴文本右侧 */
  margin-left: 2px; /* 微调间距 */
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

JavaScript

只需要更新#dynamic-text的内容，光标始终在文本右侧，不会影响文本的居中宽度计算。

关键原理 #

不管用哪种方法，核心都是让光标脱离文档流——这样浏览器计算文本宽度时就不会把光标算进去，文本始终保持完美居中，光标只是叠加在文本末尾的视觉元素而已。

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