List-style - CSS-Tricks

Có thể bạn quan tâm

The list-style property is a shorthand property that sets values for three different list-related properties in one declaration:

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

Here’s an example of the syntax:

ul { list-style: square outside none; }

Which would be the same as the following longhand version:

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

In the shorthand, if any values are omitted, they will revert to their initial state.

Values for list-style-type

The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Acceptable keyword values for list-style-type include:

disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-greek
lower-latin
upper-latin
armenian
georgian
lower-alpha
upper-alpha
none

MDN has a more complete list. Non-keyword values were introduced in CSS3, and are starting to see some support, like:

ul { list-style-type: "→"; }

The following demo includes a group of unordered lists to demonstrate each keyword value:

The list-style-type property applies to all lists, and to any element that is set to display: list-item.

The color of the list marker will be whatever the computed color of the element is (set via the color property).

Values for list-style-position

The list-style-position property defines where to position the list marker, and it accepts one of two values: inside or outside. These are demonstrated below with the padding removed from the lists and a left red border added:

Values for list-style-image

The list-style-image property determines whether the list marker is set with an image, and accepts a value of “none” or a URL that points to the image:

ul { list-style-image: url(images/bullet.png); }

More Demos

Browser support

Internet Explorer 6 and 7 don’t support all the keyword values for list-style-type and also have a bug where floated list items do not display their list marker. This is resolved by using a background image (instead of list-style-image) on the list items.

More information

counters lists marker Article on May 18, 2018

Using CSS Counters for Custom List Number Styling

Chris Coyier list list-style-image list-style-position list-style-type marker Article on May 5, 2020

List Style Recipes

Chris Coyier Article on Dec 5, 2011

Numbering In Style

Chris Coyier display Almanac on Sep 5, 2011

display

.element { display: inline-block; }

Sara Cope Almanac on Aug 3, 2015

::marker

li::marker { color: red; }

Geoff Graham

Từ khóa » Html List Style Disc