<h1>CSS Marquee</h1>
<h2>
  <code>div[class*=&quot;__marquee__&quot;] &gt; p</code>
</h2>
<div class="__marquee__" style="--duration: 12s;">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>
<h2>
  <code>div[class*=&quot;__marquee__&quot;] &gt; ul</code>
</h2>
<div class="__marquee__" style="--duration: 52s;">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
    <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
    <li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</li>
    <li>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
  </ul>
</div>
<h2>
  <code>div[class*=&quot;__marquee__&quot;][style~=&quot;--content:&quot;] &gt; p</code>
</h2>
<div class="__marquee__" style="--duration: 8s; --content: 'The quick brown fox jumps over the lazy dog.';">
  <p>The quick brown fox jumps over the lazy dog.</p>
</div>
<h2>
  <code>p &gt; a[class*=&quot;__marquee__&quot;] &gt; span</code>
</h2>
<p>
  <a href="#" class="__marquee__" style="--duration: 12s;">
    <span>The quick brown fox jumps over the lazy dog.</span>
  </a>
</p>
<h2>
  <code>p &gt; a[class*=&quot;__marquee__&quot;][style~=&quot;--content:&quot;] &gt; span</code>
</h2>
<p>
  <a href="#" class="__marquee__" style="--content: 'The quick brown fox jumps over the lazy dog.'; --duration: 8s;">
    <span>The quick brown fox jumps over the lazy dog.</span>
  </a>
</p>

body {
  &,
  & * {
    line-height: var(--line-height, calc(1em + var(--leading, 1rem)));
    margin: 0;
  }
  & {
    padding-block: 2rem;
    padding-inline: max(2rem, 50dvi - 20rem);
  }
}
* + :is(p, div) {
  margin-block-start: 1rem;
}
* + :is(h1, h2) {
  margin-block-start: 2rem;
}
a:where([href]:not(:hover, :focus-visible)) {
  text-decoration: none;
}
@keyframes MARQUEE {
  0% {
    transform: var(--1_transform);
  }
  100% {
    transform: var(--2_transform);
  }
}
[class*="__marquee__"] {
  & {
    --1_transform: translateX(0);
    --2_transform: translateX(-100%);
    --duration: 8s;
    --play-state: running;
    border: solid 1px #808080;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    padding-block: calc(0.5lh - 0.5em);
    /* For confirmation */
    max-inline-size: 100%;
    resize: horizontal;
  }
  &:dir(rtl) {
    --2_transform: translateX(100%);
  }
  &:is(:hover, :focus-visible) {
    --play-state: paused;
  }
  &[style~="--content:"] {
    & > * {
      /* For screen readers */
      block-size: 1px;
      border: none;
      clip-path: inset(50%);
      inline-size: 1px;
      margin: 0;
      padding: 0;
      position: absolute;
    }
    &::before,
    &::after {
      animation: MARQUEE var(--duration) linear infinite both var(--play-state);
      box-sizing: border-box;
      content: var(--content);
      display: block;
      flex: none;
      min-inline-size: 100%;
      padding-inline: 0 2em;
    }
  }
  &:not([style~="--content:"]) > * {
    & {
      animation: MARQUEE var(--duration) linear infinite both var(--play-state);
      display: block;
      flex: none;
      margin: 0;
      padding-inline: 100% 0;
    }
    &:has(> li) {
      display: flex;
      column-gap: 2em;
    }
    & > li {
      display: block;
      flex: none;
      margin: 0;
    }
  }
}