使用after伪类制造长度不等于div盒子尺寸的border

2017-09-14 08:11:22来源:cnblogs.com作者:YagmiLight人点击

分享

做项目碰到问题:记录之

  问题: 

  如上图中“新职”下的红色线条该如何实现,开始尝试将新职用一个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);}    

  即可实现此效果

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台