Skip to content

Commit 77e8013

Browse files
bennadelbennadel
committed
Add css counter example.
1 parent 0e8acda commit 77e8013

2 files changed

Lines changed: 105 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Using CSS Counters To Apply Custom Labels To An HTML List](https://bennadel.github.io/JavaScript-Demos/demos/css-counters/)
1314
* [Generating Meme Images In The Browser Using html2canvas In Angular 9.0.1](https://bennadel.github.io/JavaScript-Demos/demos/html2canvas-meme-angular9/dist/)
1415
* [Creating Linked Slider Inputs Constrained To A Given Total In Angular 9.0.0-rc.5](https://bennadel.github.io/JavaScript-Demos/demos/linked-sliders-angular9/dist/)
1516
* [Rendering A List Of Mixed Types Using NgFor And NgTemplateOutlet In Angular 9.0.0-rc.5](https://bennadel.github.io/JavaScript-Demos/demos/ng-for-mixed-types-template-outlet-angular9/dist/)

‎demos/css-counters/index.htm‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Using CSS Counters To Apply Custom Labels To An HTML List
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Using CSS Counters To Apply Custom Labels To An HTML List
14+
</h1>
15+
16+
<style type="text/css">
17+
18+
ul.friends {
19+
/*
20+
Start a new counter whose default value is 0.
21+
// --
22+
NOTE: It appears that if you want to use a counter across several sibling
23+
elements (such as across multiple UL elements), the counter has to be
24+
reset at a higher level in the DOM (such as Body, Section, etc).
25+
*/
26+
counter-reset: friends ;
27+
/* -- */
28+
font-size: 26px ;
29+
list-style-type: none ;
30+
margin: 20px 0px 20px 15px ;
31+
padding: 0px 0px 0px 0px ;
32+
}
33+
34+
ul.friends li {
35+
/* Increment the counter by 1. */
36+
counter-increment: friends ;
37+
/* -- */
38+
align-items: center ;
39+
display: flex ;
40+
margin: 5px 0px 5px 0px ;
41+
padding: 0px 0px 0px 0px ;
42+
}
43+
44+
ul.friends li::before {
45+
/*
46+
Use the current counter value to set the content of the pseudo-element.
47+
--
48+
CAUTION: Use of counter() in anything other than "content" is considered
49+
to be experimental.
50+
*/
51+
content: counter( friends ) ;
52+
/* -- */
53+
background-color: #eaeaea ;
54+
border-radius: 5px 5px 5px 5px ;
55+
box-sizing: border-box ;
56+
flex: 0 0 auto ;
57+
font-family: monospace ;
58+
font-size: 14px ;
59+
line-height: 25px ;
60+
margin-right: 10px ;
61+
min-width: 35px ;
62+
padding: 0px 5px 0px 5px ;
63+
text-align: center ;
64+
}
65+
66+
ul.friends li.bff::before {
67+
background-color: #ff3366 ;
68+
color: #ffffff ;
69+
}
70+
71+
</style>
72+
73+
<ul class="friends">
74+
<li class="bff">Kim</li>
75+
<li>Danny</li>
76+
<li>Sarah</li>
77+
<li class="bff">Luke</li>
78+
<li>Hanah</li>
79+
<li>Timmy</li>
80+
<li>Henry</li>
81+
<li>Cindi</li>
82+
<li>Donna</li>
83+
<li>Benji</li>
84+
<li class="bff">Carl</li>
85+
<li>Nancy</li>
86+
</ul>
87+
88+
<ul class="friends">
89+
<li class="bff">Kim</li>
90+
<li>Danny</li>
91+
<li>Sarah</li>
92+
<li class="bff">Luke</li>
93+
<li>Hanah</li>
94+
<li>Timmy</li>
95+
<li>Henry</li>
96+
<li>Cindi</li>
97+
<li>Donna</li>
98+
<li>Benji</li>
99+
<li class="bff">Carl</li>
100+
<li>Nancy</li>
101+
</ul>
102+
103+
</body>
104+
</html>

0 commit comments

Comments
 (0)