MENU


List

list-style (shorthand)
eg.:ul {list-style: circle inside;}


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body{columns:5;}
   ol:nth-child(1){list-style: circle inside;}
   ol:nth-child(2){list-style: simp-chinese-formal;}
   ol:nth-child(3){list-style: simp-chinese-informal;}
   ol:nth-child(4){list-style: arabic-indic;}
   ol:nth-child(5){list-style: hiragana;}
</style></head><body>
    <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ol>    
    <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ol>    
    <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ol>    
    <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ol>    
    <ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ol>    
</body></html>

...list-style-type :none
:circle
:disc
:square
:decimal
:decimal-leading-zero
:lower-roman
:upper-roman

:cjk-ideographic
:cjk-earthly-branch
:cjk-heavenly-stem
:trad-chinese-informal
:trad-chinese-formal
:simp-chinese-formal
:simp-chinese-informal

:arabic-indic
:armenian
:bengali
:devanagari
:georgian
:gujarati
:gurmukhi
:hebrew
:hiragana
:hiragana-iroha
:kannada
:khmer
:katakana
:katakana-iroha
:lao
:malayalam
:myanmar
:oriya
:telugu
:georgian
:kannada
:lower-alpha
:lower-greek
:lower-latin
. :upper-alpha
:upper-latin

...list-style-position
:inside: displays the bullet inside the content flow.
:outside: displays the bullet outside the content flow.

...list-style-image
:url('spade.gif'): uses spade.gif as the bullet.

This changes the color of the list bullets.
RESETRUNFULL
<!DOCTYPE html><html><head>
<meta charset="UTF-8"/>
<style type="text/css">
   ul {list-style: none;
       padding:0;
       margin:0;}
   li {padding-left: 1em;
        text-indent: -.7em;}
   li:before {
       content: "• ";
       color: red;
	}
</style></head><body>
  <ul><li>Cat</li>
      <li>Dog</li>
      <li>Fish</li>
   </ul>
</body></html>