How to add active css class to menu item?

You shoud use not a:active but a.active

:after is a pseudo class. But you want to select a tags which also has .active class.

.navbar a:hover,
.navbar a:focus,
.navbar a.active {
  color: red !important;
}

<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse">
    <div class="nav navbar-nav">
      <a href="/index.php" class="active">Home</a>
      <a href="#">Links</a>
      <a href="#">About</a>
    </div>
  </div>
</nav>

Use the css Class selectors

The CSS class selector matches elements based on the contents of their class attribute.

.navbar a.active {
  color: red;
}

<nav class="navbar navbar-expand-lg">
  <div class="collapse navbar-collapse">
    <div class="nav navbar-nav">
      <a href="/index.php" class="active">Home</a>
      <a href="#">Links</a>
      <a href="#">About</a>
    </div>
  </div>
</nav>

keep in mind that The :hover CSS pseudo-class

The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

and avoid !important you can read more about !important_exception here

Why is it not active, but with active CLASS

instead of a:active use .active to reference, in this case you can also read more about the selector HERE

I think, it should be like this:

navbar a:hover {
color:red;
font-weight:bolder;
text-decoration:underline;
}