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

问题

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

回答1:

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.

回答2:

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". ";
}

回答3:

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.

回答4:

Try this

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

回答5:

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… */

回答6:

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

来源：https://stackoverflow.com/questions/48617360/how-to-store-the-last-counter-value-in-css-and-display-as-content-in-html

标签

html

css

css-counter