html菜单，鼠标悬停，出现方括号

css

   a {
        position: relative;
        display: inline-block;
        outline: none;
        text-decoration: none;
        color: #000;
        font-size: 14px;
        padding: 5px 10px;
        left: 50px;
        transition: 0.3s;
    }

    a:hover::before,
    a:hover::after {
        position: absolute;
    }

    a:hover::before {
        content: "\5B";
        left: -20px;
        animation: mymovebefore ease-out 0.3s;
    }

    a:hover {
        color: red;
        font-size: 14px;
    }

    a:hover::after {
        content: "\5D";
        right: -20px;
        animation: mymove ease-in-out 0.3s;
        font-family: "宋体";
    }

    @keyframes mymove {
        from {
            right: 0px;
            opacity: 0;
        }

        to {
            right: -20px;
            opacity: 1;
        }
    }

    @keyframes mymovebefore {
        from {
            left: 0px;
            opacity: 0;
        }

        to {
            left: -20px;
            opacity: 1;
        }
    }

html

<div>
    <center><a class="item1" id="test" href="">全国健康指数</a></center>
</div>