List style position

Syntax

Class
Properties
list-inside
list-style-position: inside;
list-outside
list-style-position: outside;
<div class="t1 w-256 py-16 px-32 bg-c-white shadow-4 tab-2"> <div>Hello world</div> <ul class="t1 mt-8 list-inside list-disc"> <li>foo</li> <li>bar</li> <li>baz</li> </ul> <div class="t1 mt-8">Hello world</div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Show bullets and numberings inside the list container.
t1 list-inside
.t1.list-inside { list-style-position: inside; }
Show bullets and numberings outside the list container.
t1 list-outside
.t1.list-outside { list-style-position: outside; }