如何用CSS实现可变宽度文本旁的text-shadow模拟重复文本（跑马灯场景）

要解决文本宽度不固定时，无法用固定偏移值的text-shadow模拟重复文本的问题，纯CSS下更可靠的方案是使用伪元素复制文本——因为text-shadow的百分比偏移基于字体大小而非元素宽度，无法精准匹配文本宽度。

修改后的代码实现 #

CSS

.marquee {
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}

.marquee > * {
  display: inline-block;
  transform: translateX(0%);
  animation: marquee 5s linear infinite;
  will-change: transform;
}

/* 伪元素复制文本，模拟重复效果 */
.marquee > *::after {
  content: attr(data-text);
  margin-left: 1em; /* 可自定义重复文本与原文本的间距 */
  color: inherit;
}

@keyframes marquee {
  to {
    transform: translateX(-100%);
  }
}

HTML

<div class="marquee">
  <h1 data-text="lorem ipsum dolor ist as ment lorem ipsum">lorem ipsum dolor ist as ment lorem ipsum</h1>
</div>

方案说明 #

1. 利用::after伪元素，通过attr(data-text)获取原文本内容，自动继承原文本的样式与宽度，完美适配文本内容的变化。
2. 伪元素会紧跟在原文本后方，配合跑马灯的translateX(-100%)动画，实现无缝的滚动重复效果。
3. 如果一定要使用text-shadow，由于CSS原生无法直接获取元素宽度作为阴影偏移量（text-shadow的百分比单位基于字体大小），无法实现精准适配，伪元素方案是纯CSS下的最优解。

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