CSS to add the words "Previous" and "Next" to the post titles on main posts page

  • Author
    Posts
  • #3067048

    I’m using the Edin theme and can edit my CSS.

    The previous and next post titles appear at the bottom of the main posts page, but I’m wondering if I can add the words “Previous” and “Next” either above, below or to the side of the titles.

    Sometimes my previous and next post titles just look like a quote at the bottom of the page and I want to make sure potential readers know that those links are for navigation. THANKS in advance for any assistance!

    here’s an example: https://pragmaticcompendium.com/2018/01/19/but-there-aint-no-point-in-talking-when-theres-nobody-listening-so-we-just-ran-away/

    The blog I need help with is pragmaticcompendium.com.

    #3067248

    floflo56
    Member

    Hi there,

    I looked at your website. So you want a “next” and a “previous” text before the link to the next and previous articles on the bottom of the page.
    On the page https://pragmaticcompendium.com/2018/01/19/but-there-aint-no-point-in-talking-when-theres-nobody-listening-so-we-just-ran-away/
    It would be before the link “People talking without speaking. People hearing without listening.” and the link “Chain Breaker (unmixed cover by Julie Stiles Mills)” is it right?

    You can do this by editing your CSS with the command :

    .nav-next:before {
        content : "next ";}
    for the link to the next page
    
    and

    .nav-previous:before {
    content : “previous “;}
    for the link to the previous page

    You can also change the font or the color if you want. For example if you want the text to be red you can just write :
    `.nav-next:before {
    content : “next “;
    color:red;}

    I hope this will help you.

    #3067249

    floflo56
    Member

    I’m sorry it looks like the formatting came through funny !

    I’ll try again

    .nav-next:before {
        content : "next ";}

    for the link to the next page

    and

    .nav-previous:before {
    content : "previous ";}

    for the link to the previous page.

    You can also change the font or the color if you want. For example if you want the text to be red you can just write :

    .nav-next:before {
    content : "next ";
    color:red;}

    I hope that’s a bit easier to read :)

    #3067259

    floflo56,
    That is EXACTLY what I needed – and you read my mind about the color!
    :)

    THANKS so much and have a GREAT weekend!

The topic ‘CSS to add the words "Previous" and "Next" to the post titles on main posts page’ is closed to new replies.