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 to create a drop down menu like the one in this picture

    how to disable the highlighting view on selection either in html or css?

    How to make div to expand vertically without using overflow or javascript or hardcoded values such as margins

    How to override css property?

    How to style this value with jQuery

    How to Change a Plugin's CSS

    How to divide a menu horizontaly between buttons , using CSS?

    CSS: How to target all elements within a given ID

    How to use absolute position relative to parent element

    how to make this (table) using divs and css

    How to know which CSS style is applied and from where (javascript)?

    Can someone explain in detail how the clear works in this code?

    Button Built in CSS showing different font color in FF and Webkit

    How to keep image position despite window/device size?

    How to css style flexible elements to match their parents

    How to add tooltip to image on hover with CSS

    Codeigniter--add “active” css class to link, how to?

    How can I keep the hovered menu item open so I can edit it's style with firebug?

    How to use an arrow for slideToggle indicator?

    How can I prevent my li's from going below my menu even if there is no room?

    How to apply css on one html file only

    How to move a div up and down infinitely in CSS3?

    how to make a drop down menu fixed from the top with css?

    How to let the user choose a page number?

    How to get Style From jQuery in angular2

    html/css - using sprite with tag - how to remove the outline in Chrome?

    How to set up css hierarchies

    How can I use jquery to hide a drop down menu when the user clicks outside of the menu area?

    Jquery Ui Sortable showing broken image in IE8

    How to make all images look same