如何为<a>文本</a>设置动画<a>而不是<span>使用 CSS</span></a>

Question

I have made a menu navigation with Bootstrap and I have added a simple transition to hyperlinks inside the menu... See it here .

As you can see when you hover over the right links of the menu, they will go left because I have set the CSS like this:

    .rightlinks a:hover{
    padding-right:20px;
}

.rightlinks a, .leftlinks a{
    font-size:15px;
    color:#000 !important;
}

.rightlinks a{
    transition:padding-right 0.45s linear;
}

But the problem is that I want to animate only the text and not the icon! Look at my HTML code to understand better:

<nav id="nav_wrapper" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="BKoodakBold leftlinks"><a href="#"><span class="glyphicon glyphicon-user"></span></a></li>
                    <li class="BKoodakBold leftlinks"><a href="#"><span class="glyphicon glyphicon-search"></span></a></li>
                </ul>
                <ul class="nav navbar-nav navbar-center">
                    <a class="navbar-brand" href="#"><img src="assets/img/logo.png" width="50"></a>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="BKoodakBold rightlinks"><a href="#">درباره ما &nbsp; <span class="glyphicon glyphicon-info-sign"></span></a></li>
                    <li class="BKoodakBold rightlinks"><a href="#" >میراث گویانت &nbsp; <span class="glyphicon glyphicon-gift"></span></a></li>
                    <li class="BKoodakBold rightlinks"><a href="#">صفحه اصلی &nbsp; <span class="glyphicon glyphicon-globe"></span></a></li>
                </ul>
            </div>
        </div>
    </nav>

As you can see each link contains an span tag which is an icon. And because of my custom CSS, it has affected the padding-right:20px; but I dont want the span tag to be affected by this transition. Only the menu link or text should be animated...

So if you know the answer to this question, please let me know! Thanks :)

Answer 1

add <p></p> to the text field you want to move. Then use css like this to animate your icon.

.rightlinks a p:hover{
    padding-right:20px;
}

.rightlinks a p, .leftlinks a p{
    font-size:15px;
    color:#000 !important;
}

.rightlinks a p{
    transition:padding-right 0.45s linear;
}

Also fixed the position of text corresponding to your icon

Answer 2

I took the glyphicon spans out and put them in individual <li>

I got it working. Keep in mind that the neighboring icons will still be effected.

Codepen