Skip to main content
CSS is fun and cool and I like it.

#184: Inside & Aligned Lists

The fact that lists render their markers outside their own box (by default) is slightly weird. Any hidden overflow or overhanging off the edge of the browser will hide them. Moving them inside the box feels better and safer, but doing it that the easy way means losing the really nice alignment we got for free with outside list markers. We want it both ways! Let’s do that with our own custom counters, CSS grid (with subgrid), and some more … Read article “#184: Inside & Aligned Lists”



The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

ul {
  list-style: <list-style-type|| <list-style-position|| <list-style-image;

Here’s an example of the syntax:

ul {
  list-style: square outside none;

Which would be the same as the following longhand version:

ul {
  list-style-type: square;
  list-style-position: outside;
  list-style-image: none;

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-typeRead article “list-style”