Меню с полоской активной

Меню с полоской активной

<div class="top-nav">
  <ul class="top-nav_menu">
    <li><a href="#">CSS</a></li>
    <li><a href="#">SASS</a></li>
    <li><a href="#">HTML</a></li>
    <li><a href="#">PHP</a></li>
  </ul>
  </div>
  -------------SASS--------------
  .top-nav
  width: 600px
  margin: 0 auto
  color: red
  height: 60px
  background: #d3d3d3
  display: flex
  &_menu
    list-style: none
    padding: 0
    display: flex
    li
      margin-right: 45px
      margin-left: 10px
      a
        text-decoration: none
        &::after
          content: ""
          display: block
          width: 100%
          height: 2px
          background-color: black
          transform: translateY(23px) scale(0)
        &:hover
          text-decoration: none
          &::after
            transform: translateY(23px) scale(1)