A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://webplatform.github.io/docs/css/properties/list-style-type below:

list-style-type · WebPlatform Docs

list-style-type Summary

Specifies the type of list-item marker in a list.

Overview table
Initial value
disc
Applies to
elements with ‘display: list-item’
Inherited
Yes
Media
visual
Computed value
as specified
Animatable
No

CSS Object Model Property
:

Syntax Values
armenian
The marker is traditional Armenian numbering
circle
circle
decimal
number. This is default for <ol>
decimal-leading-zero
number with leading zeros (01, 02, 03, etc.)
disc
filled circle. This is default for <ul>
georgian
traditional Georgian numbering
inherit
The value of the listStyleType property is inherited from parent element
lower-alpha
lower-alpha (a, b, c, d, e, etc.)
lower-greek
lower-greek
lower-latin
lower-latin (a, b, c, d, e, etc.)
lower-roman
lower-roman (i, ii, iii, iv, v, etc.)
none
No marker is shown
square
square
upper-alpha
upper-alpha (A, B, C, D, E, etc.)
upper-latin
upper-latin (A, B, C, D, E, etc.)
upper-roman
upper-roman (I, II, III, IV, V, etc.)
Examples

The following examples use the list-style-type attribute and the list-style-type property to set the markers.

This example uses ul as a selector in an embedded (global) style sheet to change the marker type to circle.

<style>
    ul { list-style-type:circle }
</style>

View live example

This example demonstrates the use of decimal-leading-zero.

<style type="text/css">
.decleadzero {
    list-style-type: decimal-leading-zero;
}
...
</style>
<body>
 <ol class="decleadzero">
  <li>This is the first item. </li>
  <li>This is the second item. </li>
  <li>This is the third item. </li>
 </ol>
    ...
</body>

View live example

Using the list-style-type on ordered lists



.list-style--leading-zero {
    list-style-type:  decimal-leading-zero;
}

.list-style--roman {
    list-style-type:  upper-roman; 
}

View live example

If the left padding of a line item is set to 0 and the list has list-style-position: outside; (which is the default) the list-item markers will not show.



ul {
    padding:0;
}

.list-position--inside {
    list-style-position: inside;
}

View live example

Example for unordered lists



.list-style--circle {
    list-style-type: circle;
}

.list-style--square {
    list-style-type: square;
}

.list-style--square {
    list-style-type: none; 
}

View live example

Example for unordered lists with list-style-type set as none which removes the default bullet style of the unordered list.



#withBullets ul {
    color: #f06;
    font: italic 100% Georgia, serif;
    width: 500px;
    padding:10px;
    margin:10px;
    list-style-type:none;   
}
#withBullets li{
    display:inline;
    margin:8px;
    padding:4px;
}
#withBullets li:hover{
    border-bottom:3px solid black;
    border-radius:4px;
}

ul{
    color: #f06;
    font: italic 100% Georgia, serif;
    width: 500px;
    padding:10px;
    margin:10px;
    list-style-type:square;
}
li{
    margin:8px;
}
a:link{text-decoration:none;color:green;}
a:hover{text-decoration:none;color:green;}
a:active{text-decoration:none;color:green;}
a:visited{text-decoration:none;color:green;}

View live example

Usage 
 The list-style-type CSS property specifies appearance of a list item element. As it is the only one who defaults to display:list-item, this is usually a <li> element, but can be any element with this display value.
Notes Notes See also Related articles Generated and Replaced Content Related pages Attributions

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4