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

• 

  pragmaticcommunication · Member · Jan 20, 2018 at 5:47 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  floflo56 · Member · Jan 20, 2018 at 8:22 pm

  • Copy link

  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.

• 

  floflo56 · Member · Jan 20, 2018 at 8:25 pm

  • Copy link

  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 :)

• 

  pragmaticcommunication · Member · Jan 20, 2018 at 10:27 pm

  • Copy link

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

  THANKS so much and have a GREAT weekend!