You may like to use the_posts_pagination()
instead of the_posts_navigation() or get_next/previous_posts_link().
The posts pagination function outputs a set of page numbers with links to the previous and next pages of posts.
Example format would be like this below:
<div class="pagination_style">
<?php
the_posts_pagination(array (
'prev_text' => __( 'PREV' ),
'next_text' => __( 'NEXT' ),
'screen_reader_text' => __( ' ' ),
));
?>
</div>
.
Extra Lines about CSS: Implementing your own CSS styling you could handle the look and feel.
As an example, I coded which outputs like this –
You may see the CSS code as well.
.pagination_style{ margin: -5% 0 5%; text-align: center; }
.pagination_style a {color:black; text-align:center; padding: .5em 1em; text-decoration:none; transition:background-color .5s;-moz-transition:background-color .3s; -webkit-transition: background-color .3s; width: 50%;}
.pagination_style span.current {background-color: #4caf50; color: white; padding: .5em 1em; }
.pagination_style a:hover {background-color: #ccc;}
It can be noted that if you right-click on the page-number link to inspect you would see current class is auto-generated inside span as an active selector.
Hope this helps.