Back to CSS Tags & Chips Marquee Chip Pure CSS
Share
.ctc-marquee { display: inline-flex; align-items: center; width: 200px; padding: 9px 14px; background: #1f1f2e; color: #f0eeff; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; font: 600 12px/1 system-ui, sans-serif; text-decoration: none; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }

.ctc-marquee-track { display: inline-flex; gap: 32px; white-space: nowrap; flex-shrink: 0; }

.ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track { animation: ctc-marquee-roll 7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .ctc-slide:hover, .ctc-aurora,
  .ctc-status-dot::after,
  .ctc-marquee:hover .ctc-marquee-track, .ctc-marquee:focus-visible .ctc-marquee-track,
  .ctc-life-chip[data-state="adding"], .ctc-life-chip[data-state="adding"] .ctc-life-icon { animation: none !important; }
  .ctc-life-chip[data-state="adding"] { transform: none; opacity: 1; }
}
<a href="#" class="ctc-marquee">
  <span class="ctc-marquee-track">
    <span>Senior Frontend Engineer @ TechCorp</span>
    <span aria-hidden="true">Senior Frontend Engineer @ TechCorp</span>
  </span>
</a>
Live preview Edit any tab — preview updates live Ready