How to store the last counter value in css and display as content in html?

Question

For example, my CSS looks like this:

.page-number:after { counter-increment: page; }

When show as content, for example 6 pages:

.page-number:after { 
   content: 'Page ' counter(page) ' of';
}

I want to store the last counter -which is 6 - and print it out after each item. Is that possible to do that?

ul {
  list-style: none;
  counter-reset: page;
  padding: 0;
}
.page-number {
  counter-increment: page;
}
.page-number:before {
  content: 'Page ' counter(page) ' of'
}

<p>I want to use counters to print '6' after each item. eg. page 1 of 6 </p>
<ul>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
</ul>

My .page-number is with position fixed, which will be display for all of the pages printed.

updated:

@media print {
body { margin: 0; }
thead { counter-reset: pages; }
.page-number:before { counter-increment: pages; content: " "; }
.page-number:after { counter-increment: page; }
.page-number:after { content: "Page " counter(page) " of " counter(pages); }
}

https://codepen.io/anon/pen/OQNreQ

I found no way to get the total, i tried some trick but it only show for first page and other pages will left empty such as 1 of 2 then 1 of ' '. — Crazy, Feb 05 '18 at 08:59

score 0 · Answer 1 · edited Feb 05 '18 at 07:58

0

If you want to shown your html as below; 1. Test 2. Test 3. Test

you can do so:

<div class="test">
  <h3>List Item</h3>
  <h3>List Item</h3>
  <h3>List Item</h3>
</div>
.test {
  counter-reset: page;
}
.test h3:before {
  counter-increment: page;
  content: page". ";
}

edited Feb 05 '18 at 07:58

Tomasz Mularczyk

34,501
19
112
166

answered Feb 05 '18 at 07:31

Rasad Hasanzada

106
4

Not really. i want do it for printing. Need to do trick for getting last pages value – Crazy Feb 05 '18 at 07:32

score 0 · Answer 2 · answered Feb 05 '18 at 07:44

0

I think you want something like this:

body {
  counter-reset: page;
}

.page-number:after { 
  counter-increment: page;
  content: counter(page);
  visibility: hidden;
}

.page-number:last-child:after { 
  visibility: visible;
}

<div id="wrap">
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
  <div class="page-number">test</div>
</div>

You have to print the counter otherwise it would not increment. So I changed the visibility.

answered Feb 05 '18 at 07:44

Huelfe

1,776
16
25

No, my page number is position fixed which will be display on every page of printed. – Crazy Feb 05 '18 at 07:49
It is something like Page 1 of 6. I tried a lot of result but no luck. I tried my own way to show total but it will only display on first page. – Crazy Feb 05 '18 at 07:51

Danield · Answer 3 · 2018-02-06T14:02:29.477

Here is a proof of concept to show that this can be done with pure CSS:

1) Add one element after the page-list which stores the total amount of pages.

2) Make use of the CSS element() function - Currently a draft in the Images Module Level 4 spec - but supported by firefox since version 4 - to copy it's contents as a background to the other items.

From MDN:

The element() CSS function defines an value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated.

Demo snippet (View in firefox)

ul {
  list-style: none;
  counter-reset: page;
}
.page-number {
  counter-increment: page;
  padding-right: 0.3em;
  float: left;
  clear: left;
}
.page-number:before {
  content: 'Page ' counter(page) ' of'
}
.page-number ~ .page-number {
  background:-moz-element(#counterTotal) no-repeat right center;
  padding-right: 0.8em;
}
.copy:before {
  content: counter(page);
}

<ul>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
  <li class="page-number"></li>
</ul>
<span id="counterTotal" class="copy"></span>

NB: I'm posting this answer as a proof of concept to show that theoretically this can actually be done with pure CSS (with the cost of adding one extra element). That being said, I would certainly recommend using a javascript solution here.

How do i apply in my case? I know how to do this, but still i cant get the result i want when printing. — Crazy, Feb 05 '18 at 11:10

score 0 · Answer 4 · answered Sep 20 '18 at 10:20

0

Try this

.page-number:after
    {
       counter-increment: page;
       content: counter(page) "/" counter(pages);
    }

answered Sep 20 '18 at 10:20

shubham

1
1

score 0 · Answer 5 · answered Feb 04 '19 at 13:39

I've had to build something similar recently. I found a brute-force solution.

Using SASS:

.page {
  counter-increment: page;

  @for $i from 1 through 100 {
    &:nth-last-child(#{$i})::after,
    &:nth-last-child(#{$i}) ~ &::after {
      content: "Page " counter(page) " of #{$i}.";
    } 
  }
}

As you can imagine, it outputs quite a lot of CSS:

.page {
  counter-increment: page;
}
.page:nth-last-child(1)::after, .page:nth-last-child(1) ~ .page::after {
  content: "Page " counter(page) " of 1.";
}
.page:nth-last-child(2)::after, .page:nth-last-child(2) ~ .page::after {
  content: "Page " counter(page) " of 2.";
}
.page:nth-last-child(3)::after, .page:nth-last-child(3) ~ .page::after {
  content: "Page " counter(page) " of 3.";
}
/* etc… */

Ahmad Samilo · Answer 6 · 2018-02-05T10:27:08.693

-1

You can work with "CSS Counters"

For example

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1>Using CSS Counters:</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>

<p><b>Note:</b> IE8 supports these properties only if a !DOCTYPE is specified.</p>

</body>
</html>

Source https://www.w3schools.com/css/css_counters.asp

edited Feb 05 '18 at 10:27

answered Feb 05 '18 at 08:13

Ahmad Samilo

914
16
30

Mostly taken from [this W3Schools example](https://www.w3schools.com/css/tryit.asp?filename=trycss_gen_counter-reset) and butchered in such a way as to make that IE8 note a complete non-sequitur by changing the :before to ::before (which, hilariously, [another W3Schools example also does](https://www.w3schools.com/css/tryit.asp?filename=trycss_counters3)). – BoltClock Feb 05 '18 at 09:08

How to store the last counter value in css and display as content in html?

6 Answers6

Demo snippet (View in firefox)

Related