Codectionary / Developer documentation / CSS

List Styling

list-style controls how list markers (bullets or numbers) appear on <ul>/<ol> elements. list-style-type sets the marker style, list-style-position controls whether markers sit inside or outside the content box, and list-style: none is the standard way to remove markers entirely, commonly used when repurposing a list for navigation.

Syntax

list-style: type position image;

Examples

Removing Default List Styling

The standard reset applied when using a <ul> for non-list purposes, like navigation.

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 16px;
}
  1. The navigation uses a real list of links.
  2. The rules remove ordinary markers and arrange the list horizontally.
  3. The semantic list remains in the HTML; check keyboard navigation as well as its visual styling.
HTML used by this example
<nav aria-label="Course links"><ul><li><a href="#html">HTML</a></li><li><a href="#css">CSS</a></li><li><a href="#js">JavaScript</a></li></ul></nav>

Custom Marker Styles

Changing marker type and using the ::marker pseudo-element for further styling.

ol { list-style-type: upper-roman; } /* I, II, III... */
ul { list-style-type: square; }

li::marker {
  color: #3b82f6; /* styles just the bullet/number, not the text */
  font-weight: bold;
}
  1. The ordered list demonstrates Roman numbering.
  2. The unordered list demonstrates square markers.
  3. ::marker changes the marker colour and weight without replacing the list content.
HTML used by this example
<ol><li>Install tools</li><li>Run a program</li><li>Read the result</li></ol><ul><li>Reference</li><li>Examples</li></ul>

Parameters and values

  • list-style-type (disc | circle | square | decimal | none): Sets the marker appearance
  • list-style-position (inside | outside): Whether markers sit inside or outside the content box
  • ::marker (pseudo-element): Targets just the marker for additional styling

Best practices

  • Set list-style: none and remove default padding when using a <ul>/<ol> for navigation or other non-literal-list purposes
  • Use the ::marker pseudo-element to style bullets/numbers directly, rather than hiding markers and faking them with ::before
  • Keep semantic list markup (<ul>/<ol>/<li>) even when visually removing markers - screen readers still announce it as a list, which is often the correct behavior
  • list-style-position: inside wraps text under the marker; outside (the default) keeps wrapped text aligned with the first line, not the marker

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading