How to Create a Marquee in HTML/CSS!

Hey fellow creators

Learn how to create a marquee in HTML/CSS only in less than a minute!

If you prefer to watch the video version, it's right here :

1. The HTML structure.

Create a basic HTML structure with a container and then a "p" with some text inside:

<div class="marquee-container">
    <p class="marquee">
        LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME
    </p>
</div>

2. Style the page.

Start by styling the container by making sure its overflow is hidden:

.marquee-container{
    display: flex;
    align-items: center;
    background: #25284c;
    overflow: hidden;
}

Then style the text however you want, but most importantly create an animation:

.marquee{
    font-size: 100px;
    line-height: 1.3;
    font-family: sans-serif;
    padding: 24px 0;
    color: #fff;
    white-space: nowrap;
    animation: marquee 3.5s infinite linear; /* notice the infinite */
}

Add a pseudo element ::after with the exact same text as the one in the "p" :

.marquee:after{
    content: "LONDON - PARIS - SYDNEY - TOKYO - NEW YORK - BERLIN - ROME";
}

3. Create the animation.

Now create the animation itself:

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

It will make the div containing the text go to the left, you can put 50% if you want to animate it to the right.

After 50% of the width it will reset to the beginning of the animation without a flinch, thus starting the animation again and again.

This, indeed, can only work if we are using the same text in the p tag and the after.

There you go, you've now created a nice smooth marquee!

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

See you soon!

Enzo.