鼠标经过的时候，下划线动态从左往右展示出来

第一块是鼠标没有经过的状态，第二块是鼠标经过时的状态

html:

<ul>

<li>hgh</li>

<li>hhhghtg</li>

</ul>

css:

.indexproducts .prolist li a:before {

            -webkit-transition: width .2s ease-in-out;

            transition: width .2s ease-in-out;

            left: 0;

            content: "";

            position: absolute;

            bottom: 0;

            width: 0;

            border-bottom: solid 3px #ff3a3a;

        }

    .indexproducts .prolist li a:hover:before {

        width: 100%;

    }