list-style

The list-style CSS shorthand property allows you to set all the list style properties at once.

Try it

Note: This property is applied to list items, i.e., elements with display: list-item;. By default this includes <li> elements. Because this property is inherited, it can be set on a parent element (normally <ol> or <ul>) to make the same list styling apply to all the items inside.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

css

/* type */
list-style: square;

/* image */
list-style: url("../img/shape.png");

/* position */
list-style: inside;

/* type | position */
list-style: georgian inside;

/* type | image | position */
list-style: lower-roman url("../img/shape.png") outside;

/* Keyword value */
list-style: none;

/* Global values */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;

The list-style property is specified as one, two, or three keywords in any order. If list-style-type and list-style-image are both set, then list-style-type is used as a fallback if the image is unavailable.

Values

list-style-type

See list-style-type.

list-style-image

See list-style-image.

list-style-position

See list-style-position.

none

No list style is used.

Accessibility concerns

In a notable exception, Safari will not recognize an ordered or unordered list as a list in the accessibility tree if it has a list-style value of none. This behavior is intentional and not considered a bug.

The most straightforward way to address this is to add an explicit role="list" to the <ol> or <ul> element in the markup. This will restore the list semantics without affecting the design:

html

<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

A CSS-only workaround is also available for those who do not have access to the markup: Adding pseudo-content before each list item can restore list semantics:

css

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

The added pseudo-content is tested by Safari to determine if it should be accessible or ignored. Accessible pseudo-content restores list semantics, while ignored pseudo-content does not.

Generally, text or images are determined to be things that should be accessible, which is why the content: "+ "; declaration in the previous example works.

A declaration of content: ""; (an empty string) is ignored, as are content values that contain only spaces, such as content: " ";, so these do not work.

If the intent is to keep list item markers visually hidden, this can often be managed with a zero-width space, &#8203;, which is \200B in CSS and \u200B in JavaScript:

css

ul {
  list-style: none;
}

ul li::before {
  content: "\200B";
}

Another visually hidden approach is to apply an <image> to the list-style property:

css

nav ol,
nav ul {
  list-style: none;
}

/* becomes */

nav ol,
nav ul {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
}

These CSS workarounds should be used only when the HTML solution is not available, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact users' experiences.

Formal definition

Initial valueas each of the properties of the shorthand:
Applies tolist items
Inheritedyes
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:

Formal syntax

list-style = 
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>

Examples

Setting list style type and position

HTML

html

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

css

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Result

Specifications

Specification
CSS Lists and Counters Module Level 3
# list-style-property

Browser compatibility

BCD tables only load in the browser

See also