when click the menu change the ::after background

how can i change the color of ::after pseudo-element when i click the a tag?

this is my html code:

<div class="menu">
  <div class="row" style="justify-content: center;">
       <div class="menu-item">
          <a href="" class="row" id="border" onclick="change(0)">
              <span>home</span>
            

          </a>
       </div>

       <div class="menu-item">
          <a href="" class="row" id="border" onclick="change(1)">
              <span>subjects <i class="fa-solid fa-angle-down"></i> </span>
             
          </a>
       </div>

       <div class="menu-item">
          <a href="" class="row" id="border"  onclick="change(2)">
              <span>expert solutions</span>
  
          </a>
       </div>
   </div>
</div>

and this is my css code:

:root
{
    --background-border-menu: red;
}
.menu
{
    width: 328px;
    background-color: blue;
}
.menu-item
{
    height: 70px;
    background-color: blanchedalmond;
    margin:0 5px;
}
.menu-item a
{
    position: relative;
    height: 70px;
    padding: 5px;
    font-size: 0.875rem;
    text-transform: capitalize;
    color: #2e3856;
    font-family: 'Pathway Extreme', sans-serif;
    font-weight: 600;
}

.menu-item a::after
{ 
    position: absolute;
    content: " ";
    width: 100%;
    height: 0.3rem;
    background-color: var(--background-border-menu);
    bottom: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    left: 0;
}

and this is my js code:

function change(i)
{
    var item = document.querySelectorAll("#border");
    item[i].style.setProperty("--background-border-menu" , "blue");
}

I want when I click on one of my items, only that item's change the a::after background color
When I click, it changes, but I don't know how to remove the previous item

Edit a variable defined in :root like this. It nullifies the need for a loop in the handler. Here's a minimal reproducable example.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.addEventListener(`click`, handle);
const rootRule = getRootRule();
let defaultColor = "red";

createSomeDivs();

function handle(evt) {
  if (evt.target.classList.contains(`testColor`)) {
    defaultColor = defaultColor === `red` ? `green` : `red`;
    rootRule.setProperty(`--test-color`, defaultColor);
  }
}

function createSomeDivs() {
  const divs = [...Array(10)].map( (_, i) => {
    const isEven = i % 2 == 0;
    return `<div class="${isEven ? `testColor` : `none`}">
      ${isEven ? ` ` : `I'm just a div`}
     </div>`;
     });
  document.body.insertAdjacentHTML(`beforeend`, divs.join(``))
}

function getRootRule() {
  return [...document.styleSheets[0].rules]
    .find(rule => 
      rule.cssText.trim().startsWith(`:root`))?.style;
}

<!-- language: lang-css -->

:root {
  --test-color: red;
}

.testColor:after {
  content: "click me!";
  color: var(--test-color);
  cursor: pointer;
}

<!-- end snippet -->

Or use this small library I've written. It enables creation/modification/removal of css rules. Here's an example of how to use it to toggle a css variable (from :root).

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const cssEditFactory = window.LifeStyleFactory;
delete window.LifeStyleFactory;
const modifyCss = cssEditFactory({createWithId: `myCustomStylesheet`});
let currentColor = `green`;

// add a handler (event delegation)
document.addEventListener(`click`, handle);

setStyleAndCreateDivs(currentColor);

function handle(evt) {
  if (evt.target.classList.contains(`testColorChanger`)) {
    let current = currentColor;
    // toggle color
    currentColor = current === `green` ? `blue` : `green`;

    // rewrite the css rule
    modifyCss(`:root { --my-color: ${currentColor}; }`);

    // report the text of the current rule
    console.clear();
    console.log(document.querySelector(`#myCustomStylesheet`)
      .sheet.rules[0].cssText);
  }
}

function setStyleAndCreateDivs(currentColor) {
  // create 2 rules
  // \F60A
  [`:root { 
      --my-color: ${currentColor}; 
      --test-hover-color: orange; }`,
   `.testColorChanger::after { 
      color: var(--my-color);
      content: ' I am div.testColorChanger::after. Click me! \0C';
      box-shadow: 1px 2px 5px #ccc;
      border-radius: 4px;
      margin: 0.8rem 0;
      cursor: pointer;
    }`,
    `.testColorChanger:hover:after {
      color: var(--test-hover-color);
    }`,
    `div:hover {
      color: red;
    }`]
  .forEach(rule => modifyCss(rule));  
  
  // create some divs with class testColorChanger
  const divs = [...Array(10)].map( (_, i) => {
    const isEven = i % 2 == 0;
    return `<div class="${isEven ? `testColorChanger` : `none`}">
      ${isEven ? ` ` : `I'm just a div`}
     </div>`;
     });
  document.body.insertAdjacentHTML(`beforeend`, divs.join(``));
}

<!-- language: lang-html -->

<script src="https://kooiinc.github.io/LifeCSS/index.browser.js"></script>

<!-- end snippet -->

Here is a simple way to do it:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

<div class="menu">
  <div class="row" style="justify-content: center;">
    <div class="menu-item">
      <a href="" class="row" id="border" onclick="changeColor(this, 0)">
        <span>home</span>
      </a>
    </div>

    <div class="menu-item">
      <a href="" class="row" id="border" onclick="changeColor(this, 1)">
        <span>subjects <i class="fa-solid fa-angle-down"></i> </span>
      </a>
    </div>

    <div class="menu-item">
      <a href="" class="row" id="border" onclick="changeColor(this, 2)">
        <span>expert solutions</span>
      </a>
    </div>
  </div>
</div>

<!-- language: lang-css -->

.menu-item a.clicked::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: red; /* Change this to the desired color */
}

<!-- language: lang-js -->

function changeColor(element, index) {
  // Remove the 'clicked' class from all links
  const links = document.querySelectorAll('.menu-item a');
  links.forEach((link) => link.classList.remove('clicked'));

  // Add the 'clicked' class to the clicked link
  element.classList.add('clicked');
}

<!-- end snippet -->

let currentItem = null;
function change(i) {
  const items = document.querySelectorAll("#border");
  if (currentItem !== null) {
    currentItem.style.setProperty("--background-border-menu", "red");
  }
  const clickedItem = items[i];
  clickedItem.style.setProperty("--background-border-menu", "blue");
  currentItem = clickedItem;
}