MurakamiShinyu/page-counter-in-running-element.html

## page-counter-in-running-element.html
<!DOCTYPE html>
<style>
  @page {
    @top-right {
      content: element(RunningElement);
    }
  }
  .running-element {
    position: running(RunningElement);
    color: blue;
  }
  .running-element::after {
    content: "Page " counter(page);
    color: maroon;
    border-inline-start: 1em solid green;
    padding-inline-start: 0.25em;
    margin-inline-start: 0.25em;
  }
  section + section {
    break-before: page;
  }
</style>
<body>
  <div class="running-element">Page Counter in Running Element</div>
  <h1>Page Counter in Running Element</h1>
  <section>
    <h2>Page 1</h2>
  </section>
  <section>
    <h2>Page 2</h2>
  </section>
  <section>
    <h2>Page 3</h2>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa adipisci, tempora, asperiores consequuntur voluptatum illum non accusamus ex perspiciatis, cumque nihil placeat sunt fugit? Numquam nemo deserunt temporibus asperiores maxime.</p>
    <p>Animi alias, dolore nulla omnis illum dignissimos quasi saepe nisi labore est veritatis numquam provident eos voluptatibus quis aliquam autem! Commodi, consequatur.</p>
    <p>Voluptates praesentium perspiciatis nostrum quibusdam, harum totam minus. Sapiente aperiam alias et repellat, architecto pariatur hic, veritatis minus quo consequatur ea ipsum?</p>
    <p>Corporis debitis, ducimus molestiae ipsam architecto officiis excepturi ea error maxime a id reprehenderit sunt labore pariatur repudiandae sequi quo magni praesentium.</p>
    <p>Quasi aliquam molestias ut libero? Amet ipsam reprehenderit vel inventore aut? Commodi deserunt aut eos asperiores iste adipisci incidunt minus enim ad.</p>
    <p>Illum illo dicta iure sequi fuga consequatur, totam esse officia blanditiis magnam ipsa soluta beatae libero, laudantium unde facere eos vel maiores!</p>
    <p>Molestiae, dicta impedit alias saepe porro, magnam consequatur dolorem, repellat modi dignissimos repudiandae tempora eligendi doloremque eos sit reiciendis quo ratione asperiores?</p>
  </section>
</body>
	<!DOCTYPE html>
	<style>
	@page {
	@top-right {
	content: element(RunningElement);
	}
	}
	.running-element {
	position: running(RunningElement);
	color: blue;
	}
	.running-element::after {
	content: "Page " counter(page);
	color: maroon;
	border-inline-start: 1em solid green;
	padding-inline-start: 0.25em;
	margin-inline-start: 0.25em;
	}
	section + section {
	break-before: page;
	}
	</style>
	<body>
	<div class="running-element">Page Counter in Running Element</div>
	<h1>Page Counter in Running Element</h1>
	<section>
	<h2>Page 1</h2>
	</section>
	<section>
	<h2>Page 2</h2>
	</section>
	<section>
	<h2>Page 3</h2>
	<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa adipisci, tempora, asperiores consequuntur voluptatum illum non accusamus ex perspiciatis, cumque nihil placeat sunt fugit? Numquam nemo deserunt temporibus asperiores maxime.</p>
	<p>Animi alias, dolore nulla omnis illum dignissimos quasi saepe nisi labore est veritatis numquam provident eos voluptatibus quis aliquam autem! Commodi, consequatur.</p>
	<p>Voluptates praesentium perspiciatis nostrum quibusdam, harum totam minus. Sapiente aperiam alias et repellat, architecto pariatur hic, veritatis minus quo consequatur ea ipsum?</p>
	<p>Corporis debitis, ducimus molestiae ipsam architecto officiis excepturi ea error maxime a id reprehenderit sunt labore pariatur repudiandae sequi quo magni praesentium.</p>
	<p>Quasi aliquam molestias ut libero? Amet ipsam reprehenderit vel inventore aut? Commodi deserunt aut eos asperiores iste adipisci incidunt minus enim ad.</p>
	<p>Illum illo dicta iure sequi fuga consequatur, totam esse officia blanditiis magnam ipsa soluta beatae libero, laudantium unde facere eos vel maiores!</p>
	<p>Molestiae, dicta impedit alias saepe porro, magnam consequatur dolorem, repellat modi dignissimos repudiandae tempora eligendi doloremque eos sit reiciendis quo ratione asperiores?</p>
	</section>
	</body>