list-style

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

Try it

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");


  
    NASA Notable Missions
    
      Apollo
      Hubble
      Chandra
      Cassini-Huygens
      Spitzer

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

The values of this property are applied to list items, including

elements and elements with display: list-item;. Because this property is inherited, it can be set on a parent element (normally

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;

/* two values */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/* three values */
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 values in any order. If list-style-type and list-style-image are both set, the list-style-type is used as a fallback if the image is unavailable.

Values

list-style-type: A , , or none. If omitted in the shorthand, the default disc value is used. See list-style-type.
list-style-image: An or none. If omitted, the default none value is used. See list-style-image.
list-style-position: Either inside or outside. If omitted, the default outside value is used. See list-style-position.
none: No list style is used.

Formal definition

Initial value	as each of the properties of the shorthand: `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
Applies to	list items
Inherited	yes
Computed value	as each of the properties of the shorthand: `list-style-image`: The keyword `none` or the computed `list-style-position`: as specified `list-style-type`: as specified
Animation type	as each of the properties of the shorthand: `list-style-image`: discrete `list-style-position`: discrete `list-style-type`: discrete

Formal syntax

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

 = 
  inside   |
  outside  

 = 
    |
  none     

 = 
    |
           |
  none             

 = 
         |
    

 = 
    |
             

 = 
    |
    

 = 
  symbols( ? [  |  ]+ )  

 = 
  url(  * )  |
                        

 = 
  src(  * )  

 = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

Accessibility

Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the

navigation element. This behavior is intentional and is not considered a bug.

To ensure lists are announced as lists, include role="list" to

. This restores list semantics without affecting the design:

html


  An item
  Another item

If an ARIA role is not an option for your code, CSS can be used instead. Adding non-empty pseudo-content such as text or images before each list item can restore list semantics, but impacts the visual appearance. Safari determines if the added pseudo-content suffices as accessible content, restoring list semantics if so. Generally, Safari considers text and images as sufficient, which is why the content: "+ "; shown below works (but requires additional styling to not affect the design).

css

ul {
  list-style: none;
}

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

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

These CSS workarounds should only be used when an HTML solution is unavailable, and only after testing to ensure that they don't result in unexpected behaviors that may negatively impact user experience.

Examples

Setting list style type and position

HTML