Different types of lists
Numbered lists, bullets, but also chapters and subchapters
by Ovi Stof
HTML
<!--
Sources:
• https://developer.mozilla.org/en-US/docs/Web/CSS/@counter-style
• https://www.w3schools.com/cssref/css_entities.asp
• https://emojipedia.org/
• https://www.w3schools.com/cssref/pr_gen_counter-increment.asp
<p>
<strong>Note:</strong>
In order to view special characters, the following line may need to be placed in the HEAD section:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p>
-->
<h3 class="capitol">"Surrounded" numbers</h3>
<ul class="cerc_num">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Pellentesque ornare diam eros, eget consectetur lorem dignissim dapibus</li>
<li>Donec blandit euismod orci, sit amet tincidunt dui pulvinar rutrum</li>
<li>In efficitur, magna in congue fermentum, ante quam dictum arcu, at sollicitudin nulla quam ac sapien</li>
<li>Praesent ornare magna sed velit suscipit ornare</li>
<li>Mauris vitae libero suscipit, porta est eu, tincidunt quam</li>
<li>Nunc vel risus pharetra, convallis lorem quis, tempor leo</li>
<li>Donec ultrices ex ut scelerisque euismod</li>
<li>Duis aliquet eu lacus sit amet cursus</li>
<li>Fusce eget sapien ut nisi vulputate consectetur vestibulum interdum nunc</li>
</ul>
</style>
<h3 class="capitol">Alphabetical "numbers"</h3>
<ul class="alfab">
<li>Mauris vitae libero suscipit, porta est eu, tincidunt quam</li>
<li>Nunc vel risus pharetra, convallis lorem quis, tempor leo</li>
<li>Donec ultrices ex ut scelerisque euismod</li>
<li>Duis aliquet eu lacus sit amet cursus</li>
<li>Fusce eget sapien ut nisi vulputate consectetur vestibulum interdum nunc</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
<li>Pellentesque ornare diam eros, eget consectetur lorem dignissim dapibus</li>
<li>Donec blandit euismod orci, sit amet tincidunt dui pulvinar rutrum</li>
<li>In efficitur, magna in congue fermentum,...CSS
/* @charset "UTF-8";*/
ul { margin-left: 6em; padding-left: 0;}
h4 {font-style:italic;border-top:2px double gray;border-bottom:2px double gray;}
/* NUmerotare capitol nivel 3*/
h3 {
margin-left: 5em;
}
h3.capitol {display: list-item; counter-increment: nr_capitol;}
h3.capitol::marker {content: "Ex. " counter(nr_capitol) ": "; font-weight:bold;}
/* "Surrounded" numbers*/
@counter-style cerc_num {system: fixed; symbols: /*❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿*/ ➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ; suffix: " ";}
ul.cerc_num {list-style: cerc_num; }
ul.cerc_num li::marker {color:orange; font-size: 1.4em;}
/* Alphabetical "numbers"*/
@counter-style alfab {system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ ; suffix: " ";}
ul.alfab {list-style: alfab; }
ul.alfab li::marker {color:blue; font-size: 1.5em;}
/* Dice */
@counter-style zar {system: fixed; symbols: ⚀ ⚁ ⚂ ⚃ ⚄ ⚅; suffix: " ";}
ul.zar {list-style: zar; }
ul.zar li::marker {color:red; font-size: 1.5em;}
/* Lines */
@counter-style linii {system: fixed; symbols: ⚊ ⚌ ☰; suffix: " ";}
ul.linii {list-style: linii; }
ul.linii li::marker {color:blue; font-size: 1.5em;}
/* Points */
@counter-style puncte {system: fixed; symbols: "∙" ":" "⋮" ⁞ ; suffix: " ";}
ul.puncte {list-style: puncte; }
ul.puncte li::marker {color:red; font-size: 1.5em; }
/* Footnote */
@counter-style foot_mote {system: fixed; symbols: "*" "**" "***" ; suffix: ") ";}
ul.foot_mote {list-style: foot_mote; }
ul.foot_mote li::marker {color:gray; position: relative; top: -0.5em; font-size: 70%;}
/* Models */
@counter-style model {system: fixed; symbols: ⊦ ⊩ ⊪ ; suffix: " ";}
ul.model {list-style: model; }
ul.model li::marker {color:purple; font-size: 1.5em; }
/* Peace */
@counter-style peace {system: cyclic; symbols: ☮ ☯ ☸; suffix: " ";}
ul.peace {list-style: peace; }
ul.peace li::marker {color:blue; font-size: 1.5em;}
/*...