伪元素写导航栏底部划标

在写页面的时候应该会遇到导航栏active的那个的那个小条（哎哎上图上图）

这里是拿的bootstrap上的例子  平常写的时候就是 这些 li 的border-bottom写就行 但是根据页面的样式来设计的这个下标会不美观（设计会偶尔发下来的导航的下标就是要求是 都是一样的 不管你的每一项为多宽）

类似于这种

对于这种用css3就可以很好地解决 方便快捷 写js也好写出效果

就是利用伪元素 

::after (在该元素末尾添加)；

::befor (在元素前添加)；

这里的例子是用的befor 首先写下导航的布局 （这里我就不上图了应该都会写的）；

写完后给 li 添加伪元素

首先在第一个 li 的内容之前添加一个伪元素 这个元素的内容（content）为空 然后给他脱离文档定位

父元素记得写相对定位 要不然会跑 //因为是脱离文档不管你用的是after还是befor他最终结果都是一样的；

 写完后的样子是这样的

然后再加上top 和left的值就好

这个值根据你的需求来写 

写好后就变成这样了

你看这样不管你每一项的字有多宽我的下标一直是那么宽

这么写很方便只用css写就可以 不用再创建一个空标签啊什么的了

如果想写悬浮动画 可以直接改变他的 left 的值就好