Replicate the Marquee Tag with CSS

The marquee tag was a popular feature in older versions of HTML that allowed text to scroll horizontally across the screen. While the marquee tag is no longer supported in modern browsers, you can replicate its functionality using CSS animations.

.marquee {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

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

In this example, we have a p element with the class marquee. The width property is set to 100% to make the element take up the full width of its container. The white-space property is set to nowrap to prevent the text from wrapping to the next line. The overflow property is set to hidden to hide any text that overflows the element.

<p class="marquee">This is a marquee text that scrolls from right to left.</p>