Lists

list-style-position

list-style-position sets whether the list marker sits outside the item or inside it.

Syntax

inside | outside

りんご

Banana

みかん

Presets

Drag the bottom-right corner to resize

.box {
  list-style-position: inside;
}

list-style-positioninside

outsideinside

りんご

Banana

みかん

outside: puts the marker outside the item’s box (to the left in horizontal text). This is the initial value. When an item wraps, the following lines line up with the start of the first line’s text.
inside: puts the marker inside the item, as if it were the first character of the first line. Wrapped lines start at the item’s edge, under the marker.

The items in the preview here are tinted, so you can see whether the marker is outside or inside each item’s box.

An outside marker lives in the left padding of the ul or ol (browsers default to padding-left: 40px). Set it to 0 and the marker spills out of the box, where overflow: hidden and the like can cut it off.
It is inherited, so you can set it once on ul or ol. The shorthand list-style: square inside sets it together with the marker type.