css一半长度的下划线

以前写网页一直是写个span再配合相对定位，这次在uni里又得写，为了方便就没用span
两种思路，一种是用after伪类增加下划线，一种是用背景

.dog-subsection-currt::after{
	 content: '';
	    width: 40%;
	    height: 1px;
	    display: block;
		padding-top: 10upx;
	    margin: 0 auto;
	    border-bottom: 1px solid #00DDDD;
	    
		//background-image: linear-gradient(to right,#0606ff,#55aaff);
}

.dog-subsection-currt{
		font-size: 34upx; 
		color:#333;
		padding: 10upx 0; 
		font-weight: 600;
		 // text-decoration: underline #00DDDD; 
		 
		  
		    text-transform: uppercase;
		    display: inline-block;
		    text-decoration: none;
		    background-image: linear-gradient(to right,green,green);
		    background-position:bottom center;
		    background-repeat: no-repeat;
		    background-size: 50% 2px; 
	}