CSS Horizontal Marquee with Items

Want to make your site feel more dynamic? A smooth-scrolling marquee is a great way to highlight important info without overwhelming users. This little snippet, “CSS Horizontal Marquee with Items,” helps you create an auto-scrolling list of links—perfect for FAQs, support topics, or even special deals.

How It Works

It’s super simple: just some basic HTML with three rows of links that scroll automatically. No JavaScript needed—just pure CSS magic. The effect keeps things visually interesting while making important info easy to find.

Why You’ll Love It:

• Smooth scrolling – No choppy movement, just seamless animation.
• Works on any screen – Fully responsive, so it looks great everywhere.
• Easy to tweak – Add or change links without messing with code.
• Lightweight & fast – No extra scripts slowing things down.

HTML Structure

<div class="sf-horizontal-marquee">
  <!-- Row 1 -->
  <div class="row row1">
    <div class="row-wrapper">
      <div class="item"><a href="#">How to change your password safely</a></div>
      <div class="item"><a href="#">Where to find login instructions</a></div>
      <div class="item"><a href="#">How to update your profile correctly</a></div>
      <div class="item"><a href="#">What to do when payment fails</a></div>
      <div class="item"><a href="#">How to get technical support</a></div>
      <div class="item"><a href="#">Where to check order status</a></div>
      ...
    </div>
  </div>
  <!-- Row 2 -->
  <div class="row row2">
    <div class="row-wrapper">
      <div class="item"><a href="#">How to review your order history</a></div>
      <div class="item"><a href="#">Where can I find full documentation</a></div>
      <div class="item"><a href="#">How to quickly contact support</a></div>
      <div class="item"><a href="#">Where to report a system error</a></div>
      <div class="item"><a href="#">How to update contact details easily</a></div>
      <div class="item"><a href="#">Where to find the latest promotions</a></div>
      ...
    </div>
  </div>
  <!-- Row 3 -->
  <div class="row row3">
    <div class="row-wrapper">
      <div class="item"><a href="#">How to adjust your privacy settings</a></div>
      <div class="item"><a href="#">Where can I check system updates</a></div>
      <div class="item"><a href="#">How to reset your account settings</a></div>
      <div class="item"><a href="#">Where to find security information</a></div>
      <div class="item"><a href="#">How to enable two-factor authentication</a></div>
      <div class="item"><a href="#">Where to report login issues</a></div>
      ...
    </div>
  </div>
</div>

CSS Horizontal Marquee Styling:

/* ---------------------------------------------- */
/*  Snippflow CSS Horizontal Marquee with Items   */
/* ---------------------------------------------- */

.sf-horizontal-marquee {
    --sf-horizontal-marquee-bg: #fff;
    --sf-horizontal-marquee-color: #3b495e;
    --sf-horizontal-marquee-border: #e7e8ea;
    --sf-horizontal-marquee-shadow: 0px 4px 8px 0 rgba(16,24,40,.06);
    --sf-horizontal-marquee-hover-bg: #24A47B;
    --sf-horizontal-marquee-hover-border: #158561;
    --sf-horizontal-marquee-hover-color: #fff;
    --sf-horizontal-marquee-duration: 90s;
    --sf-marquee-body-bg: #f1f4f7;
}

.sf-horizontal-marquee {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 50px 0;
    width: 100%;

    .row {
        overflow-x: hidden;
        position: relative;
        padding: 10px 0;

        .row-wrapper {
            display: flex;
            gap: 20px;
            width: max-content;
        }

        &.row1 .row-wrapper {
            animation: marquee-left var(--sf-horizontal-marquee-duration) linear infinite;
        }
        &.row2 .row-wrapper {
            animation: marquee-right var(--sf-horizontal-marquee-duration) linear infinite;
        }
        &.row3 .row-wrapper {
            animation: marquee-left var(--sf-horizontal-marquee-duration) linear infinite;
        }

        &:hover .row-wrapper {
            animation-play-state: paused !important;
        }

        .item {

          a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--sf-horizontal-marquee-bg);
            border: 1px solid var(--sf-horizontal-marquee-border);
            color: var(--sf-horizontal-marquee-color);
            box-shadow: var(--sf-horizontal-marquee-shadow);
            font-size: 14px;
            border-radius: 50px;
            padding: 20px 40px;
            text-decoration: none;
            transition: all 0.3s ease-in-out;

            &:after {
              content: "\3f";
              font-family: "Font Awesome 6 Free";
              font-weight: 700;
            }

            &:hover {                
              background: var(--sf-horizontal-marquee-hover-bg);
              border-color: var(--sf-horizontal-marquee-hover-border);
              color: var(--sf-horizontal-marquee-hover-color);
            }
          }

        }
    }

    &::before,
    &::after {
        position: absolute;
        height: 100%;
        width: 300px;
        background: linear-gradient(90deg, var(--sf-marquee-body-bg) 100px, rgba(255, 255, 255, 0));
        z-index: 2;
        content: "";
    }

    &::before {
        top: 0;
        left: 0;
    }

    &::after {
        top: 0;
        right: 0;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        transform: rotate(180deg);
    }

}

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

@media only screen and (max-width: 767px) {

  .sf-horizontal-marquee {
    .item {
      max-width: 250px;
    }
    &::before,
    &::after {
        width: 80px;
        background: linear-gradient(90deg, var(--sf-marquee-body-bg) 0, rgba(255, 255, 255, 0));
    }
  }

}

Result

See the Pen CSS Horizontal Marquee with Items by Snippflow (@snippflow) on CodePen.

See also