html - CSS - 如何计算总页数？

Question

我正在尝试显示 PDF 文件的页数。

所以在标题中我放了这个css：

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

html:

<span class="page-number">Page </span>

但它返回我Page 1 of 1...... Page 2 of 2第一个计数器工作正常，但总数错误。我该如何解决？

Answer 1

没有办法使用 CSS 计数器获得计数器总数，所以我能想到的获得所需输出的唯一方法是复制 HTML（如果内容是动态生成的，这可能不是一个大问题）。输出 HTML 一次以获取页面总数，然后再次输出以获取当前页面。

#pageCounter {
  counter-reset: pageTotal;
}
#pageCounter span {
  counter-increment: pageTotal; 
}
#pageNumbers {
  counter-reset: currentPage;
}
#pageNumbers div:before { 
  counter-increment: currentPage; 
  content: "Page " counter(currentPage) " of "; 
}
#pageNumbers div:after { 
  content: counter(pageTotal); 
}

<div id="pageCounter">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
<div id="pageNumbers">
  <div class="page-number"></div>
  <div class="page-number"></div>
  <div class="page-number"></div>
  <div class="page-number"></div>
</div>

Answer 2

.page{
counter-reset: page;
}
.page .page-number{
  display:block;
  }
.page .page-number:after{
counter-increment: page;
content:counter(page);
}
.page:after{
    display: block;
    content: "Number of pages: " counter(page);
}

<div class="page">
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
<span class="page-number">Page </span>
</div>