html - 如何在 css 中存储最后一个计数器值并在 html 中显示为内容？

Question

例如，我的 CSS 如下所示:

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

当显示为内容时，例如 6 页:

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

我想存储最后一个计数器 - 这是 6 - 并在每个元素之后打印出来。可以吗？

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>

我的.page-number位置固定，所有打印的页面都会显示。

更新:

@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

Answer 1

我想你想要这样的东西:

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>

您必须打印计数器，否则它不会递增。所以我改变了可见性。