css-counter

I have a list ul>li*5 (not always the same amount). I set a counter for which I get: 1 2 3 4 5 li:nth-child(n):before { counter-increment: skill; content: counter(skill); color: white; } The Question Can I use the counter(skill) inside a calc() or can I add units to it px em rem % ms s I have tried: transition: all 250ms linear #{counter(skill)} * 1s; transition: all 250ms linear counter(skill) * 1s; I want to have the delay increased for example: li 1s delay li 2s delay li 3s delay li 4s delay li Xs delay The Question Can I use the counter(skill) inside a calc() No. You can't. The calc

I'm struggling with counter-reset when ol is in div. Red list in the snippet numbering should be: 1, 2, 3 not: 3.1, 3.2, 3.3, ol { counter-reset: item; list-style: none; } li:before { counter-increment: item; content: counters(item, ".")" "; } <ol> <li>BBD</li> <li>BBD <ol> <li>BBD</li> <li>BBD</li> <li>BBD</li> </ol> </li> <li>BBD</li> </ol> <ol> <li>BBD</li> <li>BBD</li> <li>BBD</li> </ol> <div> <ol style="color:red;"> <li>BBD</li> <li>BBD</li> <li>BBD</li> </ol> </div> http://jsfiddle.net/1dab8xs7/1/ web-tiki Your issue isn't with the counter-reset property, it is with the content property

I am using a self-styled, numbered list. How can I read the start-attribute and add it to the counter with CSS? HTML <ol> <li>Number One</li> <li>Number Two</li> <li>Number Three</li> </ol> <ol start="10"> <li>Number Ten</li> <li>Number Eleven</li> <li>Number Twelve</li> </ol> CSS ol { list-style-type: none; /* this does not work like I expected */ counter-reset: lis attr(start, number, 0); } li { counter-increment: lis } li:before { content: counter(lis)". "; color: red; } FIDDLE You may just use the attribute start as a filter : ol[start="10"] { counter-reset: lis 9; } Demo , but this will

I try to style a code pre box with line numbers in front of each line. I prefer to do it with CSS only. This is what I have done pre { background: #303030; color: #f1f1f1; padding: 10px 16px; border-radius: 2px; border-top: 4px solid #00aeef; -moz-box-shadow: inset 0 0 10px #000; box-shadow: inset 0 0 10px #000; } pre span { display: block; line-height: 1.5rem; } pre span:before { counter-increment: line; content: counter(line); display: inline-block; border-right: 1px solid #ddd; padding: 0 .5em; margin-right: .5em; color: #888 } <pre> <span>lorem ipsum</span> <span>>> lorem ipsum</span>