Bootstrap实现漂亮的超链接

Bootstrap实现漂亮的超链接，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.orchome.com/css/bootstrap/3.0.3/bootstrap.min.css"/>
    <script src="https://www.orchome.com/user/js/angular-1.5.8.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="nav">
<header>
</header>

<nav role="navigation" aria-label="main navigation" class="container nav-container overflowing">
    <div class="nav-scroll">
        <ul class="nav-inner">
            <li ng-repeat="tab in tabNames" class="nav-item" ng-class="{active:tab.name==who}">
                <a ng-click="active(tab.name)">{{tab.name}}</a>
            </li>
        </ul>
    </div>
</nav>

<script>
    // active
    var app = angular.module("myApp", []);

    app.controller("nav", function ($scope) {
       $scope.who = "Alfreds Futterkiste";
        $scope.tabNames = [{
                "name": "Alfreds Futterkiste",
            },
            {
                "name": "Germany",
            }]
        $scope.active = function(name){
            $scope.who = name;
        }
    })
</script>
</body>
<style>
    .nav-container .nav-scroll {
        border-bottom: 2px solid #fff;
        display: inline-block;
        font-size: 0;
        margin-bottom: 20px;
        min-width: 100%;
        padding: 5px 0 0;
        vertical-align: middle
    }

    .nav-container .nav-scroll .nav-inner .nav-item {
        display: inline-block;
        font-size: 0
    }

    .nav-container .nav-scroll .nav-inner .nav-item a {
        color: #095f79;
        display: block;
        font-size: 16px;
        font-weight: 300;
        padding: 10px;
        white-space: nowrap;
        position: relative;
        min-height: 2.75rem
    }

    /* 超链接移动时效果，下斜线 */
    .nav-container .nav-scroll .nav-inner .nav-item a:after {
        content: "";
        background: #0e97c0;
        height: 2px;
        width: 100%;
        left: 0;
        position: absolute;
        bottom: -1px;
        -webkit-transition: all .25s ease 0s;
        -o-transition: all .25s ease 0s;
        transition: all .25s ease 0s;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0)
    }

    .nav-container .nav-scroll .nav-inner .nav-item.active a, .nav-container .nav-scroll .nav-inner .nav-item a:focus, .nav-container .nav-scroll .nav-inner .nav-item a:hover {
        color: #0e97c0;
        text-decoration: none;
        -webkit-transition: all .25s ease 0s;
        -o-transition: all .25s ease 0s;
        transition: all .25s ease 0s
    }

    .nav-container .nav-scroll .nav-inner .nav-item.active a:after,
    .nav-container .nav-scroll .nav-inner .nav-item a:focus:after,
    .nav-container .nav-scroll .nav-inner .nav-item a:hover:after {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: all .25s ease 0s;
        -o-transition: all .25s ease 0s;
        transition: all .25s ease 0s
    }
</style>
</html>
在线运行
Bootstrap实现漂亮的超链接

昵称
