1.效果展示(颜色仅为了看出效果,可根据情况自行修改)![](https://i-blog.csdnimg.cn/blog_migrate/a8ccc809896c59faf319f6f71107e4ff.gif)
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%;