Marquee

<div class="marquee-container">
  <div class="marquee">
    <span>Here's some text</span>
    <span>Here's some more text</span>
    <span><a href="/your-link">Here's a link</a></span>
  </div>
</div>

.marquee-container {
  width: 100%;
  overflow: hidden;
  background: #212121;
  white-space: nowrap;
  padding: 10px 0;
}

.marquee {
  display: inline-block;
  white-space: nowrap;
  will-change: transform;
  animation: marquee-animation 50s linear infinite;
  pointer-events: all;
}

@media (max-width:991px) {
  .marquee {
    animation: marquee-animation 45s linear infinite;
  }
}

@media (max-width:767px) {
  .marquee {
    animation: marquee-animation 35s linear infinite;
  }
}

@media (max-width:478px) {
  .marquee {
    animation: marquee-animation 30s linear infinite;
  }
}

.marquee:hover {
  animation-play-state: paused;
}

.marquee span {
  display: inline-block;
  padding: 0 2rem;
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  position: relative;
  user-select: none;
}

.marquee span::after {
  content: '·';
  position: absolute;
  right: -0.5rem;
  font-size: 22px;
  color: #fff;
}

.marquee span:last-child::after {
  content: '';
}

.marquee span a {
  text-decoration: underline;
  cursor: pointer;
}

@keyframes marquee-animation {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-50%);
  }
}

document.addEventListener('DOMContentLoaded', () => {
    const marquee = document.querySelector('.marquee');
    const containerWidth = document.querySelector('.marquee-container').offsetWidth;
    const contentWidth = marquee.scrollWidth;

    const duplicates = Math.ceil(containerWidth / contentWidth);

    for (let i = 0; i < duplicates; i++) {
        marquee.innerHTML += marquee.innerHTML;
    }
});