Ronalds Vilciņš
· CSS

Styling list markers with CSS list-style

list-style is the shorthand I use when a list’s marker type, position, and image belong together. It combines these three properties:

You can apply it to <ol>, <ul>, or <li> elements. The values may appear in any order, and omitted values fall back to their initial values.

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

For example:

ul {
  list-style: square outside none;
}

That is equivalent to the longer version:

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

For most lists, list-style-type is the only part I need. The shorthand becomes useful when the marker position or a custom image also needs to be explicit.

Enjoyed reading this?

If you found this article helpful, consider supporting my writing. Every little bit helps keep this blog going.

← Back to all articles