pelicin › web › CSS

List Style

This page lists the CSS properties related to styling a list.

To select the list/marker pseudo-element itself, use ::marker.

CSS Properties

list-style

Shorthand for list-style-type, list-style-image, list-style-position

ul {
  list-style: inside;
  list-style: georgian inside;
  /* <list-style-type> <list-style-image> <list-style-position> */
  list-style: lower-roman url('../img/shape.png') outside;
}

list-style-type

Sets the item marker to use (disc, character, etc.). The color of the marker will be the same as the color of the element it applies to.

Specify (see the complete list-style-type here):

  • none — no item marker is shown
  • the name of a @counter-style
  • disc — a filled circle (●)
  • circle — a hollow circle (○)
  • square — a filled square (■)
  • decimal — 1, 2, 3, ...
  • decimal-leading-zero — 01, 02, 03, ...
  • lower-roman — i, ii, iii, ...
  • upper-roman — I, II, III, ...
  • lower-alpha — a, b, c, ...
  • upper-alpha — A, B, C, ...

list-style-image

Sets the image to be used as item marker.

ul {
  list-style-image: url('starsolid.gif');
}

list-style-position

Sets the position of the ::marker outside or inside of the list item.

Specify outside (default) or inside.

| LIVE PREVIEW
li { background-color: '...' }
  • Outside
  • Outside
  • Outside
  • Inside
  • Inside
  • Inside

References