JSFiddle - React, Tailwind, and code Playground

by Amando Filipe

HTML

<div class="results-pagination">	
    <span class="list-pager">
        <a href="#" title="anterior" alt="Anterior">
            <span class="results-previous"></span>
            ANTERIOR
        </a>
    </span>	
    <span class="page-num">1 / 3</span>
	<span class="list-pager">
        <a href="#" alt="Seguinte" title="Seguinte">
            SEGUINTE
            <span class="results-next"></span>
        </a>
    </span>
</div>

CSS

.results-pagination {
    text-align:center;
    padding: 0 0 20px 0;
    margin: 0 0 55px 0;
    border-bottom: 1px dotted black;
}
.page-num {
    padding: 0 20px 0 20px;
}
.results-previous:before {
    content:"\25C4";
    padding-right: 8px;
}
.results-next:after {
    content:"\25BA";
    padding-left: 8px;
}
.list-pager {
    cursor:pointer;
}
.list-pager a {
    text-decoration:none;
}
.list-pager a:hover .list-pager span {
    text-decoration:none !important;
}
.list-pager a:hover {
    text-decoration:underline;
}
.result-img {
    width:100px;
    padding:0;
}