下划线css

/* <div class="text">header</div> */
        .text {
            padding: 10px 0;
            transition: 0.5s;
            display: inline-block;
            position: relative;
        }
        .text:after {
            display: block;
            content: '';    
            border-bottom: 1px solid #000;
            transition: 0.5s;
            width: 0;
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
        }
        .text:hover.text:after {
            width: 100%;
            transition: 0.5s;
        }