<ul>

        <li>111</li>

        <li>2222</li>

        <li>3333333</li>

        <li>444444444</li>

        <li>555555555555</li>

        <li>66666666666666</li>

    </ul>

ul,li {

    margin:;

    padding:;

    list-style: none;

}

ul {

    height: 50px;

    line-height: 50px;

  background-color: #f5f5f5;

  border-radius: 8px;

}

ul li {

    float: left;

  padding: 0 20px;

  position: relative;

}

li::before {

  content: "";

  position: absolute;

  top:;

  left: 100%;

  width: 0%;

  height: 100%;

  border-bottom: 2px solid #000;

  /* transition: all 0.3s linear; */

}

li:hover::before {

  left:;

  width: 100%;

}

/* li:hover ~ li::before {

  left: 0;

} */