<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga maxime, assumenda cum quam porro consequuntur voluptatum repellat perferendis ullam, obcaecati, inventore quibusdam. Ducimus libero, voluptatem sunt aut blanditiis voluptatum necessitatibus.</p>
<!-- an ordered list -->
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<!-- an unordered list -->
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<!-- an interactive unordered list -->
<menu>
  <li><button>Button 1</button></li>
  <li><button>Button 2</button></li>
  <li><button>Button 3</button></li>
</menu>
@layer base, demo;

@layer demo {
  :where(ol, ul, menu) {
    padding-left: 0;
  }
}

@layer base {
  body {
    padding: 3rem;
  }

  p {
    max-width: 60ch;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.