下划线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%;
        }