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


Tags: html,css,css3

Problem :

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?



Solution :

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>


    CSS Howto..

    How can I make html table columns (only the ones with text) evenly spaced

    How to remove/replace cached css and js file from client Browser?

    How to limit width of

    -

    tag by length of content

    How to debug Font-Awesome icons?

    how to make certain css 3d effect works in IE

    How does css scale transform affect document flow?

    How to Make the Content 100% height and equal height columns in this layout?

    How to get html data-attribute value in css regular expressions

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    Prevent div from showing after slideUp() - jQuery

    how to fit an image inside a box and vertical align it

    How to edit menu in header - wordpress

    How to create a sticky footer in CSS inside an absolutely positioned div?

    How to disable caching of static assets like .css and .js in JSF2?

    How do I add a CSS class to an element from CSS (not jquery nor javascript)?

    how to deal with repeated letters in a javascript hangman game

    How to make this series of rules into a mixin?

    How to make CSS apply to only a portion of the link_to text?

    how to show the hidden div with same properties css with jquery

    CSS media queries [how to transform to hyperlinks via media queries]

    How to apply table cell formatting using CSS

    Normalized CSS, option in JSFiddle, how to add it to document

    How to add CSS Transition for button sliding

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    How to use javascript/css to navigate through a pure css carousel/slideshow?

    How to keep div same height at all times

    How to remove Left property when position: absolute?

    How do I properly use display:block on this menu?

    CSS: how to place controls at both extrems of a cell table

    How to align a horizontal list to the center in css