使用after偽類製造長度不等於div盒子尺寸的border

做項目碰到問題：記錄之

　　問題： 

　　如上圖中“新職”下的紅色線條該如何實現，開始嘗試將新職用一個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);
}    

　　即可實現此效果