html - 有没有更简单的方法，初学者可以理解？

Question

我发现了这个显示底部边框的菜单，我想学习如何做，但我不明白它是怎么做的，有没有更简单的方法来实现同样的事情？这是网址:https://codepen.io/atomas/pen/zBoEZe?editors=1100

HTML:

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>

CSS:

$elementsNumber: 4; 
$width: 1/$elementsNumber;


* {
  box-sizing: border-box;
}

ul { 
  position: relative;
  margin: 50px auto;
  width: 80%;
  padding: 0;
  list-style: none;
  color: #000;
  overflow: auto;
  overflow: hidden;

  li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    width: percentage($width);
    text-align: center;
    cursor: pointer;
    border-bottom: 4px solid #555;



  }
      .bar:before {
      overflow: hidden;
      content: "";
      position: absolute;
      top: 54px;
      bottom: 0;
      transition: all 0.25s;
      left: 0;
      width: percentage($width);
      height: 4px;
      background: red;
    }


}

@for $i from 1 through $elementsNumber {

    li:nth-child( #{$i} ) {
      &.selected~.bar:before,
      &.elm:hover~.bar:before,      
      &.selected.bar:before,
      &.elm.bar:hover:before
       {
        left: percentage( ( $i - 1 ) * $width );
      }
    }

}

Answer 1

* {  box-sizing: border-box;}
ul { 
  padding: 0;
  list-style: none;
  color: #000;
  }
li {
    float: left;
    padding: 15px;
    font-size: 18px;
    font-family: Roboto;
    font-weight: 700;
    text-align: center;
  
    border-bottom: 4px solid #555; 
    transition: all 0.3s;
}
li:hover {
    border-bottom: 4px solid red;
}

<ul>
  <li class="elm selected">Home</li>
  <li class="elm">Services</li>
  <li class="elm">About</li>
  <li class="elm bar">Contact</li>
</ul>