Sharavnan Kv Sharavnan Kv - 2 months ago 14
CSS Question

how to show text like 2 / 4 "page number / total pages" in css or css3

I wish to show my text like "Current page number / Total pages" using CSS

enter image description here

Html code :

<p class="pagenumber> 2 / 5 </p>


Can you assist?

Answer

A solution with two extra elements for the numbers and a pseudo element for the dividing line.

You still need to adjust it for your design and layout to make it look good.

.pagenumber {
  position: relative;
  width: 3em;
  height: 3em;
  background: #aaa;
  border-radius: 50%;
  color: #fff;
}
.pagenumber:before {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: 50%;
  height: 1px;
  background: #fff;
  transform: rotate(-30deg);
}
.pagenumber .current {
  position: absolute;
  text-align: right;
  right: 1.5em;
  top: 0.5em;
}
.pagenumber .total {
  position: absolute;
  left: 1.5em;
  bottom: 0.5em;
}
<div class="pagenumber">
  <div class="current">2</div>
  <div class="total">5</div>
</div>