I\'m converting a template to WordPress theme and i need to change some css classes. The WordPress function paginate_links generates this markup:

    <ul>
        <li><a class="prev page-numbers" href="">Prev</a></li>
        <li><a class="page-numbers" href="">1</a></li>
        <li><a class="page-numbers" href="">2</a></li>
        <li><a class="page-numbers" href="">3</a></li>                        
        <li><a class="next page-numbers" href="">Next</a></li>
    </ul>

But I want to remove page-numbers class from the elements with prev or nextclass, to generate a result like this:

    <ul>
        <li><a class="prev" href="">Prev</a></li>
        <li><a class="page-numbers" href="">1</a></li>
        <li><a class="page-numbers" href="">2</a></li>
        <li><a class="page-numbers" href="">3</a></li>                        
        <li><a class="next" href="">Next</a></li>
    </ul>

I tried DOMXpath as cited here: Change class="page-numbers" in pagination

And also tried this: https://gist.github.com/pixeline/1dc662b756c553eb5efcb6ec4753375f

I don\'t know if it\'s possible to do what i want only with PHP. I\'m trying not to use jQuery to maintain the template as close of the original source.

Edit: CSS for the specific markup:

    .page { /* <nav> */
        margin: 3.2rem auto 3.2rem;
        text-align: center;
    }

    .page ul {
      display: inline-block;
      list-style: none;
      margin-left: 0;
      position: relative;
      padding: 0 6rem;
    }

    .page ul li {
      display: inline-block;
      margin: 0;
      padding: 0;
    }

    .page-numbers { 
      font-family: "Helvetica", sans-serif;
      font-weight: 700;
      font-size: 1.7rem;
      line-height: 3.2rem;
      display: inline-block;
      padding: 0.2rem 1.2rem;
      height: 3.6rem;
      margin: 0.2rem 0.2rem;
      color: #000000;
      transition: all, 0.3s, ease-in-out;
    }

    .page-numbers:hover {
      background: #d3d3d3;
      color: #000000;
    }

    .page .current,
    .page .current:hover {
      background-color: #000000;
      color: white;
    }

    .page .inactive,
    .page .inactive:hover { 
      opacity: 0.4;
      cursor: default;
    }

    .prev, 
    .next {
      display: block;
      background-repeat: no-repeat;
      background-size: 18px 9px;
      background-position: center;
      height: 3.6rem;
      width: 4.8rem;
      line-height: 2rem;
      padding: 0;
      margin: 0;
      opacity: 1;
      font: 0/0 a;
      text-shadow: none;
      color: transparent;
      transition: all, 0.2s, ease-in-out;
      position: absolute;
      top: 50%;
      -webkit-transform: translate3d(0, -50%, 0);
      transform: translate3d(0, -50%, 0);
    }

    .prev:hover,
    .next:hover {
      background-color: #d3d3d3;
      color: #000000;
    }

    .prev {
      background-image: url("../images/icons/arrow-left.svg");
      left: 0;
    }

    .next {
      background-image: url("../images/icons/arrow-right.svg");
      right: 0;
    }

    .prev.inactive,
    .next.inactive {
      opacity: 0.4;
      cursor: default;
    }

    .prev.inactive:hover,
    .next.inactive:hover {
      background-color: transparent;
    }