css3 过度线条

<li><a href="http://dd7eutr3.s11.myxypt.com/about_about/">关于我们</a></li>

.x-sub-menu > li > a {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #efefef;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 15px;
    color: #333;
}
.x-sub-menu > li > a::before{
    display: inline-block;
    width: 4px;
    height: 4px;
    margin-right: 5px;
    vertical-align: middle;
    background: #000;
    content: "";
}

.x-sub-menu > li:hover > a::before{
    background-color: #d00000;
}