CSS 实战元素宽度变化方案二

演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <style type="text/css">
            nav{
                width: 400px;height: 40px;background-color: #222222;
                margin: 100px auto;
                display: flex;justify-content: space-between;
            }
            div{
                width: 100px;height: 40px;
                position: relative;
            }
            div a{
                display: block;width: 100px;
                height: 40px;line-height: 40px;text-align: center;color: white;
                position: absolute;top: 0;left: 0;
            }
            div p{
                width: 10px;height: 3px;
                position: absolute;
                top: -3px;left: 0;
            }
            div:hover a{
                background-color: #f00;
                color: #FFFFFF;
            }
            div:hover p{
                width: 100px;
                transition: width 1s;
                background-color: #FF0000;
            }
        </style>
    </head>
    <body>
        <nav>
            <div>
                <a href="">首页</a>
                <p></p>
            </div>
            <div>
                <a href="">商城</a>
                <p></p>
            </div>
            <div>
                <a href="">论坛</a>
                <p></p>
            </div>
        </nav>
    </body>
</html>