Mais uma dúvida sobre o .ativo

Pelo o que entendi, foi criada a classe ativo apenas para apresentação do curso. A borda está fixa no ícone de Início e caso o site estivesse funcionando de verdade ela não sumiria e apareceria embaixo do ícone das outras páginas como Aplicativos. Ou estou errado?

<li class="menu__item">
                    <a class="menu__link ativo" href="#">
                        <i class="fas fa-home"></i>
                        Início
                    </a>
                    <a class="menu__link" href="#">
                        <i class="fas fa-mobile-alt"></i>
                        Aplicativos</a>
                    <a class="menu__link" href="#">
                        <i class="fas fa-gamepad"></i>
                        Jogos
                    </a>
                </li>

.menu__link:hover, .menu__link.ativo {
    border-bottom: 2px solid #0073E6;
}