css实现导航栏鼠标移入下划线特效

.nav ul li:after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 3px;
    -webkit-border-radius: 1.5px;
    -moz-border-radius: 1.5px;
    -ms-border-radius: 1.5px;
    -o-border-radius: 1.5px;
    border-radius: 1.5px;
    background: #eb0001;
    /* background: -webkit-linear-gradient(left, #ED3B47 0%, #0C2B47 100%); */
    background: -moz-linear-gradient(left, #ED3B47 0%, #0C2B47 100%);
    background: -ms-linear-gradient(left, #ED3B47 0%, #0C2B47 100%);
    background: -o-linear-gradient(left, #ED3B47 0%, #0C2B47 100%);
    /* background: linear-gradient(to right, #ED3B47 0%, #0C2B47 100%); */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#ED3B47, endColorstr=#0C2B47, GradintType=0 );
    /* -webkit-box-shadow: 0px 5px 5px rgba(228,0,52,.13); */
    -moz-box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    -ms-box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    -o-box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    box-shadow: 0px 5px 5px rgba(228,0,52,.13);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

 

posted @ 2020-10-24 09:31  绿林豪士  阅读(1056)  评论(0编辑  收藏  举报