161 questions
0
votes
2
answers
128
views
CSS page counters not visible in generated PDF using @page rule
I'm developing a feature to generate a PDF health report from an EJS template. I'm trying to add page numbers (e.g., "Page 1 of 10") to the footer of each page. I'm using the CSS Paged Media ...
-1
votes
1
answer
145
views
How to add index column to HTML <table> using just CSS? [duplicate]
How to add an index column to a HTML <table> using just CSS?
Before:
ITEM PRICE
Banana $2
Orange $1
After:
No. ITEM PRICE
1 Banana $2
2 Orange $1
How to add it automatically? I.e., what ...
- 606
0
votes
0
answers
105
views
Use multiple counter-reset rules on one element
I have two different CSS files, and I want body to reset two counters:
This file is linked before:
body {
counter-reset: counter-one;
}
and this one after
body {
counter-reset: counter-two; /*...
0
votes
1
answer
98
views
Trailing zeros in content: counters function of CSS
I've used the content CSS value with the counters function to create ordered lists that have nested numbering. My html is created using the DITA open toolkit, so there are auto-generated and ...
3
votes
1
answer
104
views
Why are there two different results for the numbering of <dl> tags in Edge and Firefox?
The following snippets produce different results in Edge and Firefox:
dd {
display: list-item;
list-style-position: inside;
list-style-type: decimal;
counter-increment: 1;
}
<ul>
&...
- 39
0
votes
1
answer
49
views
I don't know how to make my <ol> inside <ul> begin with only one number
I'm trying to style lists inside of lists in CSS but there is a problem when I have an ordered list inside an unordered one. I'd like the ordered list which is inside an unorered list to begin at 1. ...
- 1
1
vote
2
answers
2k
views
Increment Counter in CSS for a list with :before
I tried to increment a counter for a list with CSS. However, even though I can see the list numbers, those don't increment.
I used :before and the CSS property counter. Here's the code:
....
- 132
-2
votes
1
answer
155
views
At-rule counter-style in pseudo-element does not works
Is it possible to use @counter-style on a pseudo-element?
I tried with an ::after, but it does not works, while in direct selector, @counter-style works. Problem with this case: if I want to move the ...
- 103
0
votes
1
answer
885
views
CSS counters don't work inside other elements [duplicate]
This problem is not a duplicated of CSS counter-increment is not working for nested div and h3 elements
I have a problem using CSS counters when the element on which is applied is inside other ...
- 1,211
0
votes
1
answer
795
views
How to set the grid-template-columns repeat() integer dynamically via a counter?
Not adding columns to the grid via fill or fit.
Incrementing/decrementing the grid-template-columns repeat() integer when <app-panel>s are dynamically added/removed to/from the DOM.
Something ...
- 29
5
votes
3
answers
1k
views
What is the difference between counter-set and counter-reset in CSS?
I've recently been trying to automatically number headings for my Notion writing. The usual implementation I found on the Internet is like this:
body {
counter-reset: chapter;
}
h1 {
counter-...
- 73
3
votes
2
answers
823
views
CSS Nested Ordered Lists Counter Manipulation
I would like to start nested ordered lists with specific numbers while keeping numbering normal (based on the first starting number) for nested list items. Rather than send people down the wrong path ...
1
vote
4
answers
2k
views
Numbering a nested list in a single ol list
I have an ordered list with some li tags in it. I want the The li tags with .sub-item class to be nested li tags. Is there a way I can reset numbering for the li tags having class? The list is as ...
- 265
0
votes
1
answer
611
views
Adding Numbers to ol li via counters (when using display flex) not working
Add numbers to the following list using CSS: Counters. I am trying, but I think I am not applying currently.
#two li {display: flex;}
li::before {counter-increment: all};
<div>
<ol>
...
- 8,296
1
vote
1
answer
191
views
CSS counters for headings in divs resetting too often [duplicate]
I've copy-pasted what seems to be some popular code for automatically numbering headers in HTML (from here)
But this seems to fail if my headings are inside divs:
example:
<!DOCTYPE html>
&...
- 14.7k
1
vote
0
answers
341
views
Custom HTML elements defined in JS not inheriting parent element styles
I am trying to create two new custom HTML elements step-list and step-item which will work similar to ol and li items and will create an ordered list with any single-digit numbers preceded by a 0.
I'm ...
- 6,188
0
votes
1
answer
357
views
CSS3 Increment Text After Animation Complete
I am new to CSS animations so I made this little project in which there is a box bouncing and it looks pretty real. I want the text inside the box (at the beginning it is just a 0) to increment by one ...
user15254625
3
votes
0
answers
326
views
include css counters in anchor links?
Problem summary
I'm creating a print stylesheet for a simple html document with id-referenced headers and anchors to reference these headers, like
<h1 id="the-document">The Document&...
- 2,801
5
votes
4
answers
2k
views
css counter-reset: not working in firefox?
Has the Firefox desktop v84 update broken the CSS counter-reset: functionality?
Chrome and Edge render ok but not Firefox
Can anybody confirm?
Below is a sample of the code that I'm using:
body
{
...
- 61
2
votes
1
answer
2k
views
Is it possible to count lines of text in CSS
I am looking for a possible way, solely using CSS that could allow one to increment a CSS counter for every line of text within a DOM element.
This question is similar, but not the same as this SO ...
user12492341
1
vote
1
answer
498
views
CSS counters for headings nested in div
I ran into a CSS issue which I can't solve of my own.
It's easy: The CSS counters work with headings without div, but don't work with headings in a div.
Look at the following examples...
This works
...
- 807
5
votes
4
answers
2k
views
Is there a pure CSS way to continue ordered list numbering across 2 seperated ordered list?
Demo: https://jsfiddle.net/jacobgoh101/uqrkaodc/3/
<ol>
<li>a</li>
</ol>
<ul>
<li>b</li>
</ul>
<ol>
<li>c</li>
<li>d<...
- 20.9k
0
votes
1
answer
126
views
is possible to write css content inside the div
This is my css for creating counters:
#lctndrp li:before{
content: counters(item, ".") " ";
counter-increment: item;
}
This is my html:
<ol>
<li>
::before
one
<...
5
votes
1
answer
406
views
CSS counters doesn't work in subitems inside of div
I'm trying to use the CSS counter to create Chapter numbers.
As you can see in the example below, it's working properly if I deal with classes inside a container, but doesn't work when I try to use it ...
- 407
5
votes
2
answers
4k
views
CSS Counter with a Number Padding [duplicate]
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 {
...
