andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Clean counter snippet

Browse Source
This commit is contained in:
Mattia Astorino
2018-03-10 18:37:31 +01:00
parent 9cf3ab8802
commit c6fadff90f
1 changed files with 35 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
snippets/counter.md
View File

@ -5,77 +5,55 @@ Counters are, in essence, variables maintained by CSS whose values may be increm
#### HTML #### HTML
```html ```html
<section class="countable-section"> <ul>
<div class="countable-item"> <li>List item</li>
<p>Some item</p> <li>List item</li>
<div class="countable-section"> <li>List item</li>
<p>First sub item</p> </ul>
<p>Second sub item</p>
<p>Third sub item</p>
</div>
</div>
<div class="countable-item">
<p>Second other item</p>
</div>
<div class="countable-item">
<p>Third item</p>
</div>
<div class="countable-item">
<p>Fourth item</p>
</div>
</section>
``` ```
#### CSS #### CSS
```css ```css
.countable-section { ul {
counter-reset: counter1; counter-reset: counter;
} }
.countable-item p {
counter-increment: counter1; li::before {
} counter-increment: counter;
.countable-item p:before { content: counters(counter, '.') ' ';
content: counters(counter1, '-') ' ';
font-weight: bold; /* for better visualization on demo */
} }
``` ```
#### Demo #### Demo
<div class="snippet-demo"> <div class="snippet-demo">
<section class="snippet-demo__countable-section"> <div class="snippet-demo__countable-section">
<div class="snippet-demo__countable-item"> <ul>
<p>Some item</p> <li>List item</li>
<div class="snippet-demo__countable-section"> <li>List item</li>
<p>First sub item</p> <li>
<p>Second sub item</p> List item
<p>Third sub item</p> <ul>
</div> <li>List item</li>
</div> <li>List item</li>
<div class="snippet-demo__countable-item"> <li>List item</li>
<p>Second other item</p> </ul>
</div> </li>
<div class="snippet-demo__countable-item"> </ul>
<p>Third item</p> </div>
</div>
<div class="snippet-demo__countable-item">
<p>Fourth item</p>
</div>
</section>
</div> </div>
<style> <style>
.snippet-demo__countable-section { .snippet-demo__countable-section ul {
counter-reset: counter1; counter-reset: counter;
} list-style-type: none;
.snippet-demo__countable-item p { }
counter-increment: counter1;
} .snippet-demo__countable-section li::before {
.snippet-demo__countable-item p:before { counter-increment: counter;
content: counters(counter1, '.') ' '; content: counters(counter, '.') ' ';
font-weight: bold; }
}
</style> </style>
#### Explanation #### Explanation
@ -86,7 +64,7 @@ You can create a ordered list using any type of HTML.
2. `counter-increment` Used in element that will be countable. Once `counter-reset` initialized, a counter's value can be increased or decreased. 2. `counter-increment` Used in element that will be countable. Once `counter-reset` initialized, a counter's value can be increased or decreased.
3. `counter(variable_name, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve two parameters, the first as the name of the counter and the second one can be `decimal` or `upper-roman` (`decimal` by default). 3. `counter(name, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve two parameters, the first as the name of the counter and the second one can be `decimal` or `upper-roman` (`decimal` by default).
4. `counters(variable_name, separator, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be `decimal` or `upper-roman` (`decimal` by default). 4. `counters(variable_name, separator, style)` Displays the value of a section counter. Generally used in a `content` property. This function can recieve three parameters, the first as the name of the counter, the second one you can include a string which comes after the counter and the third one can be `decimal` or `upper-roman` (`decimal` by default).