How to Style Pagination Link Text Using CSS

Hi guys, it’s been almost a month now I’ve been out of action on this blog. I have been delivering projects after projects after projects! (*phew*). But, now that I have some time on my hand, I’m gonna write a post on styling pagination links using css only.

Before we go on to the styling pagination links section though we’ll discuss a bit about what pagination is and when it should be used.

What is Pagination?

Here’s what Wikipedia says about pagination!

“Pagination is the process of dividing (content) into discrete pages”

So content on a website can be paginated to structure the content better and to logically link the content that has been divided into various pages. The list of blogs on a blog page is an example of paginated content, the shop page in an eCommerce website is an example of paginated content.

Simply put, the following image is an example of pagination

When should you use Pagination?

Once while browsing on Facebook I clicked on a link to read an article on ‘10 things to do before you are 25’. While the title caught my attention span I soon lost interest because an article that could have easily been completed in one single page was spread over an expanse of 10 clicks. Yes! you heard it right. 10 clicks. After the first two clicks I had lost interest. So, if the writer was happy over getting ad space on 10 different pages it is a completely lost effort!

So use pagination only when you need to link two related pages of the same category together. DO NOT  paginate content which can be displayed on a single page. An eCommerce shop page is the best example of correct use of pagination.

How to Style Pagination Link Text using CSS?

WordPress offers many ready to use plugins to include pagination into your website. And that’s something I like. 🙂

Now, what I don’t like is that these pagination links do not match the theme I’m using. (*frustrating*). Not, that I hold a grudge against the developers of these plugin. Obviously, while they can take care of the functionality….styling could be a little tedious.

So an approach I had in mind was to style the look with css, and rely on jQuery for changing the content. Another more convenient technique however which I finally did use was to change the HTML content using CSS.

The default pagination available looked like this

But, I needed it to look like this

Steps to Style Pagination Links

Step 1: In Order to achieve this I first hid the content that I didn’t want to be displayed using visibility:hidden. It is important to note here that I have only just hidden the content from the element and not the entire element. Had I wanted to hide the element then I would have used display:none

.archive-pagination li.pagination-next a,.archive-pagination li.pagination-previous a{
    visibility:hidden;
    padding:0;
    line-height:0;
    width:36px;
}

Step 2: I then added the pseudo element :after to the anchor tag and using the ‘content’ attribute I added the text which I needed to display in the element.

.archive-pagination li.pagination-next a:after{

Step 3: I then made the pseudo element that I added above by setting the value of the visibility property as visible.  With these three steps the initial content remains hidden and the pseudo text is visible.

.archive-pagination li.pagination-next a:after{
    content:"?";
    visibility:visible;
    padding:0.5em;
    font-size: 1em;
    line-height:1em;
    display:block;
    border: 1px solid #dfdbdf;
}

While I used the above three steps to customize the pagination provided by Genesis to make it resemble that of WooCommerce, the above technique can be used anywhere.

So, that was about styling pagination link text. I’ll be back soon with some more tips to improve the styling of your website.

Goodbye until then!