Archived topic
Add separator to blog page or single post navigation
5 replies · Started by mkjj on July 17, 2021
I would like to a separator to the post navigation. Right now it looks like this:
< Previous 1 2 3 Next >
I would rather have something like this:
< Previous 1 - 2 - 3 Next >
I could do this using ::before and ::after. But I wonder if there is more elegant built-in solution for this.
Thank you!
Hi there,
i would go with the CSS route as they are decorative and not descriptive and i am not its possible to filter that into the paging navigation function.
Ok, will do that. It's a bit tricky, since all elements have the .page-numbers class. So, I'll have to work with adjacent sibling selectors. It would probably be a good idea to add a second class to the single page numbers like to:
<a class=".page-numbers single-number"...
This would give more control for styling the navigation. A mean, we can't have enough classes, can we?
Well we like our HTML to be super light :)
And the WP paging navigation function isn't really that flexible.
Could try a little CSS hack like this to just print out a line behind the nav-links, and then hide it behind links with a background color:
.nav-links {
display: inline;
position: relative;
}
.nav-links:before {
content: '';
display: block;
position: absolute;
left: 0;
top; 0;
right: 0;
transform: translateY(12px); /* adjust vertical position */
height: 1px;
background-color: #000;
z-index: 0;
}
/* set link background to hide line */
.nav-links > * {
background-color: #fff;
position: relative;
}As long as it don't wrap to multiple lines on small screens, it should work.
That's an interesting approach. I would have never thought in this direction. Needs some tweaking, but should work. Thanks for the input!
You're welcome
