标签：解决办法 位置 解决 line lock ott com www 参考
做项目碰到问题：记录之
问题：
如上图中“新职”下的红色线条该如何实现，开始尝试将新职用一个span包裹起来
<span class="border">新职</span>
.border{border-bottom: 2px solid red;}
这样实现的效果会长于UI图中的效果。
解决办法：
1 可以新设一个span 设置disblay: block， 然后在下方位置上设置长度宽度颜色，在细微调整位置。
2.https://www.2cto.com/kf/201705/636877.html 参考此篇文章
采用下方代码
.title{
padding-left: 29px;
text-align: center;
color: rgb(45, 62, 80);
&:after{
position: relative;
left: -55px;
top: 10px;
display: inline-block;
height: 2px;
width: 29px;
content: ‘‘;
background-color: rgb(243, 108, 94);
}
即可实现此效果
使用after伪类制造长度不等于div盒子尺寸的border
标签：解决办法 位置 解决 line lock ott com www 参考
原文地址：http://www.cnblogs.com/fuzc1206/p/7518476.html
