.container { background: #fdfdfd; padding: 1rem; margin: 3rem auto; border-radius: 0.2rem; counter-reset: pagination; text-align: center; } .container:after { clear: both; content: ""; display: table; } .container ul { width: 100%; } .large { width: 45rem; } .pagination ul, li { list-style: none; display: inline; padding-left: 0px; } .pagination li { counter-increment: pagination; } .pagination li:hover a { color: #fdfdfd; background-color: #1d1f20; border: solid 1px #1d1f20; } .pagination li.active a { color: #fdfdfd; background-color: #1d1f20; border: solid 1px #1d1f20; } .pagination li:first-child a:after { content: "<"; } .pagination li:nth-child(2) { counter-reset: pagination; } .pagination li:last-child a:after { content: ">"; } .pagination li a { border: solid 1px #d6d6d6; border-radius: 0.2rem; color: #7d7d7d; text-decoration: none; text-transform: uppercase; display: inline-block; text-align: center; padding: 0.5rem 0.9rem; } .pagination li a:after { content: " " counter(pagination) " "; } .large li a { display: none; } .large li:first-child a { display: inline-block; } .large li:first-child a:after { content: "<"; } .large li:nth-child(2) a { display: inline-block; } .large li:nth-child(3) a { display: inline-block; } .large li:nth-child(4) a { display: inline-block; } .large li:nth-child(5) a { display: inline-block; } .large li:nth-child(6) a { display: inline-block; } .large li:nth-child(7) a { display: inline-block; } .large li:nth-child(8) a { display: inline-block; } .large li:last-child a { display: inline-block; } .large li:last-child a:after { content: ">"; } .large li:nth-last-child(2) a { display: inline-block; } .large li:nth-last-child(3) { display: inline-block; } .large li:nth-last-child(3):after { padding: 0 1rem; content: "..."; }