导航栏下划线跟随效果

1.效果展示(颜色仅为了看出效果，可根据情况自行修改)

2.html代码

    <ul>
        <li class="active">
            <a href="">option1</a>
        </li>
        <li>
            <a href="">option2</a>
        </li>
        <li>
            <a href="">option4</a>
        </li>
        <li>
            <a href="">option5</a>
        </li>
        <li>
            <a href="">option5</a>
        </li>
    </ul>

3.CSS代码

• 利用css3的伪元素(::after)来绘画下划线
• 代码如下

          /* 采用flex布局 */
          ul {
              display: flex;
              width: 100%;