ul.pages, ul.paginator { font-family: Arial,sans-serif; list-style: none; } ul.pages { margin: 0; position: relative; width: 100%; } ul.paginator { margin: 0 auto; display: table; } ul.paginator > li { position: relative; float: left; display: block; color: #666; font-weight: bold; border: 1px solid #ccc; border-radius: 4px; padding: 2px 5px; margin: 3px; top: 2px; background-color: #eee; } ul.paginator > li:not(.active):hover { cursor: pointer; } ul.paginator > li.active { background-color: #fff; } ul.paginator > li.previous::before { content: '«'; } ul.paginator > li.next::before { content: '»'; } ul.paginator > li.placeholder { border: none; background-color: transparent; } ul.paginator > li.placeholder::before { content: '…'; } ul.paginator > li.hidden { visibility: hidden; } ul.paginator > li.none { display: none; } ul.pages { padding: 0 0 10px 0; clear: both; } ul.pages > li { padding: 10px; border: 1px solid #ccc; border-radius: 0 5px 5px 5px; background-color: #fff; display: none; } ul.pages > li::after { content: "."; clear: both; display: block; visibility: hidden; height: 0; } ul.pages > li.active { display: block; }