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..

    CSS Column Help: How do I get a column within a column?

    Div's don't show up

    How can I set the width of something in jquery based on variables?

    How to change color of the selected item from a Xul listbox?

    How to create an easy responsive grid with one column and two boxes?

    How can I make this little javascript work with 2 textarea elements without killing the CSS?

    How to attach stylesheet to HTML email?

    How to add head section in a page that has layout template

    How to force Google's custom search to be responsive?

    How can I center a logo and place the links left and right on the navbar using bootstrap?

    How to fill a transparent image with a progress bar ? #CSS #HTML #Jquery?

    How to use anchor links to scroll within a div without scrolling the main page

    CSS: How to make a block to cover all width of parent block

    HTML/CSS showing buttons online and auto going to next line

    How do I set the width and height of a textarea using CSS?

    How to force font-weight on all children, but respect the nested depth

    CSS list styling - how to reduce the distance between parent and children of the previous parent?

    how to get text aligned vertically with text in list using css

    HTML CSS, how to create a Side bar or column

    How do I install SASS with Mean.io?

    How to determine the display order of
  • in a list with 4 columns?
  • In Firebug, how to tell what is overriding a style?

    How do I change phpmyadmin font size for sql query box?

    How to Replace the generic css style into empty string using C#

    How to achieve parallax behind horizontal bars while scrolling

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    How to vertically align two
    tags perfectly for each resolution?

    CSS: how to add a style to everything, unless it is defined

    How can I create this complicated layout using only CSS?

    How to change the background color of a span/div WITHOUT CSS [closed]