1

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?

Saravanan Kasi
  • 676
  • 6
  • 21
  • Related - http://stackoverflow.com/questions/13878772/how-to-display-classic-fractions-in-css-javascript – Paulie_D Sep 20 '16 at 12:45
  • @mplungjan No, not a duplicate of that, this is more about how to style the **layout of the text** I think. – Paulie_D Sep 20 '16 at 12:46

2 Answers2

3

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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Christoph
  • 1,631
  • 8
  • 19
1

body {
  font-size: 12px;
}
.pages {
  border-radius: 50%;
  background: black;
  display: table;
  height: 6em;
  width: 6em;
  color: white;
  vertical-align: middle;
  font-style: italic;
}
.pages * {
  display: table-cell;
  font-size: 200%;
}
.pages sup {
  vertical-align: middle;
  padding-bottom: 15%;
  text-align: right;
}
.pages sub {
  vertical-align: middle;
  padding-top: 15%;
  text-align: left;
}
.pages span {
  vertical-align: middle;
  font-size: 350%;
  text-align: center;
}
<p class="pages">
  <sup>6</sup><span>/</span><sub>7</sub>
</p>
ksav
  • 20,015
  • 6
  • 46
  • 66