css-counter Questions
5
Solved
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 ...
Reconstructionism asked 28/11, 2016 at 10:41
3
I want to have multiple "ol" lists where the counter value does not reset between lists. Another way to say this is that I want the counter for the first "li" in the second list to be one higher th...
Jupiter asked 22/1, 2013 at 19:27
10
I am using a self-styled, numbered list. How can I read the start-attribute and add it to the counter with CSS?
ol {
list-style-type: none;
/* this does not work like I expected */
counter-r...
Midyear asked 16/5, 2014 at 15:27
3
Solved
I'm guessing this isn't possible, but wondering if anybody has attempted to produce ordinal numbers (1st, 2nd, 3rd etc) using CSS Counters with any success?
Obviously this would be trivial in Java...
Ure asked 4/3, 2019 at 11:57
3
Solved
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...
Betjeman asked 21/4, 2017 at 9:38
2
Solved
In this example:
h3 {
font-size: .9em;
counter-reset: section;
}
h4 {
font-size: .7em;
counter-reset: subsection;
}
h3:before {
counter-increment: section;
content: counter(sec...
Kimsey asked 28/11, 2015 at 14:27
4
Solved
Demo: https://jsfiddle.net/jacobgoh101/uqrkaodc/3/
<ol>
<li>a</li>
</ol>
<ul>
<li>b</li>
</ul>
<ol>
<li>c</li>
<li>d<...
Jae asked 19/5, 2020 at 9:29
1
I've been playing around with CSS counters lately and I wondered if it was possible to put them in a CSS animation loop and increment them. My code is fairly simple:
div {
animation-name: a...
Taut asked 6/11, 2017 at 15:21
2
Solved
I'm having the below issue that my counter increment are not working properly.
h4.heading_numberlist {
margin-top: 12.0pt;
margin-right: 0in;
margin-bottom: 3.0pt;
margin-left: 0in;
page-b...
Tessi asked 16/7, 2020 at 13:25
2
Solved
Is it possible to pad counter numbers depending on its value?
div {
counter-reset: ruler;
}
div > span {
display: block;
line-height: 1rem;
}
div > span::before {
c...
Clowers asked 17/12, 2019 at 7:16
1
Solved
TL;DR
Don’t name your counter list-item
Issue:
CSS counters are comparatively easy to understand, well documented and have good browser support.
However, I encountered unexpected behaviors wi...
Yorke asked 21/11, 2018 at 21:49
1
Solved
What I have:
An ordered list with a custom counter:
ol {
/*list-style-type:decimal-leading-zero;*/
list-style: none;
padding-left: 0px;
counter-reset: item;
}
ol>li {
display...
Masker asked 19/4, 2018 at 0:4
2
How to increment ordered list with numbers and alphabet letters in CSS:
ol.nested {
margin-bottom: 0;
counter-reset: item;
}
ol.nested li {
display: block;
position: relative...
Ceceliacecil asked 21/11, 2017 at 10:18
5
Solved
In my html code I have the following list defined:
<p class="list">first.</p>
<p class="list">second.</p>
Now, in css I have:
.list {
display: table;
}
.list:befo...
Accalia asked 9/1, 2017 at 12:39
1
Solved
My objective is to print a text file line by line and append the line number at the beginning. Like so:
<div id="wrapper">
<div class="line">1: asdf</div>
<div class="line"&...
Horary asked 15/6, 2016 at 8:38
2
Solved
Say I have an HTML or XML document like this:
<body>
<section>
<h1>This should be numbered 1</h1>
<section>
<h1>This should be numbered 1.1</h1>
<...
Ramon asked 27/7, 2015 at 21:30
2
Solved
In the code below, I need to use the div tag at the top of the HTML for styling. Without the div tag in place, the hx tags are outline numbered correctly, but with the div in place everything goes ...
Lancaster asked 27/7, 2015 at 16:11
3
Solved
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...
Hedonism asked 21/7, 2015 at 12:55
7
Lets say I have a simple list like so:
<ol>
<li class="count">one</li>
<li class="count">two</li>
<li class="count">three</li...
Fructidor asked 10/11, 2014 at 10:39
3
Solved
HTML
<ol>
<li>item1
<ol>
<li>item2</li>
</ol>
</li>
<li>item1
<ol>
<li>item2</li>
<li>item3</li>
</ol>
...
Slumberous asked 20/4, 2015 at 22:25
1
Solved
I have a <ul>-list with two different counters:
ul.numbered {
counter-reset: alphaCounter, numberCounter;
}
ul.numbered li.numbered,
ul.numbered li.lettered {
padding-left: 1.8em;
}
ul.n...
Cathepsin asked 2/4, 2015 at 10:23
1
Solved
The following CSS counter example does not work as expected. The counter for sub-headings should reset after every main heading:
body {
font: smaller sans-serif;
counter-reset: h1 h2;
}
...
Boggess asked 26/2, 2015 at 14:47
1
Solved
Im having a problem with my counter that im using to get numbers before h3, h4 and h5, like a list. The number should only be visible if the tag has class="count", and its only then it should count...
Byssinosis asked 17/2, 2015 at 13:26
1
© 2022 - 2024 — McMap. All rights reserved.