下划线css

/* <div class="text">header</div> */
		.text {
			/* 作用元素 */
			display: inline-block;
			position: relative;
			padding: 10px 0;
		}
		.text:after {
			/* 下划线伪元素 */
			display: block;
			content: '';
			/* 控制下划线动画起始位置 */
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			/* 下划线样式 */
			width: 0;
			border-bottom: 1px solid #000;
			transition: 0.5s;
		}
		.text:hover.text:after {
			/* 控制下划线宽度 */
			width: 100%;
		}