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

我发现此菜单的底部显示边框，我想学习如何做，但是我不知道如何完成，是否有更简单的方法可以实现相同的目的？
这是URL：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 );
      }
    }

}

最佳答案

* {  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>

关于html - 有没有更简单的方法，对初学者来说可以理解？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37966486/