a demo about css counter
Created
November 16, 2015 16:00
-
-
Save SamHwang1990/fddbb8e4690950e1b2e7 to your computer and use it in GitHub Desktop.
css counter demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="demo1"> | |
| <div class="section">section1</div> | |
| <div class="section">section2</div> | |
| <div class="section">section3</div> | |
| <div class="section">section4</div> | |
| <div class="section">section5</div> | |
| <h3>header1</h3> | |
| <h3>header2</h3> | |
| <h3>header3</h3> | |
| <h3>header4</h3> | |
| </div> | |
| <div class="demo2"> | |
| <dl> | |
| <dt>term 1</dt> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dt>term 2</dt> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dt>term 3</dt> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| <dd>definition</dd> | |
| </dl> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * | |
| box-sizing border-box | |
| .demo1 | |
| width 400px | |
| height auto | |
| couter-reset section heading | |
| .section | |
| margin-bottom 5px | |
| padding 0 | |
| height 20px | |
| line-height @height | |
| background-color orange | |
| counter-increment section | |
| &:before | |
| content counter(section) '.' | |
| display inline-block | |
| height 20px | |
| width @height | |
| line-height @height | |
| color white | |
| background-color green | |
| h3 | |
| margin-bottom 5px | |
| padding 0 | |
| height 20px | |
| line-height @height | |
| font-weight normal | |
| background-color blue | |
| counter-increment heading | |
| &:before | |
| content counter(heading) '.' | |
| display inline-block | |
| margin-right 5px | |
| height 20px | |
| width @height | |
| line-height @height | |
| color white | |
| background-color green | |
| border-radius 100% | |
| .demo2 | |
| width 400px | |
| height auto | |
| dl | |
| counter-reset term | |
| dt | |
| counter-reset description | |
| counter-increment term | |
| &:before | |
| content counter(term, upper-roman) '. ' | |
| margin-right 5px | |
| dd | |
| counter-increment description | |
| &:before | |
| content counter(term, upper-roman) '.' counter(description, upper-roman) '. ' | |
| margin-right 5px |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment