I am trying to display line when mouse hover on links and that works fine, but another white line appeared when hover on links

CSS:

```
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus 
 {
  color: white;
  background-color: transparent;
  text-decoration: underline;
  border-bottom: solid 3px red;
 }

```

[![](https://i.stack.imgur.com/Ihxux.png)](https://i.stack.imgur.com/Ihxux.png)

How to remove the white line under Home link?