也玩before 和after僞元素玩五顏六色的導航

demo地址：http://codepen.io/tianzi77/pen/gpEMxb

僞元素能做什麼呢？
“僞元素”，顧名思義。它創建了一個虛假的元素，並插入到目標元素內容之前或之後。

單詞“pseudo”是希臘語的英譯，它的基本意思是“說謊的，不誠實的，錯誤的。”因此叫僞元素是適合的。因爲在文檔中它不實際改變什麼。相反的，它們是像幽靈一般的元素插入在css中，他們對用戶是可見的，可以通過css控制。

基本語法
:before 和 :after 僞元素編碼非常簡單(和大多數的css屬性一樣不需要一大堆的前綴)。這裏是一個簡單的例子。

#example:before {
  content: "#";
}

#example:after {
  content: ".";
}

在看一個列子

<a href="" class="tianzi">ddd</a>

        a.tianzi{
        position: relative}
a.tianzi:after {
/*
            position: absolute;
            left: 0;
            top: 0;
*/
            content: "";
/*            width: 100%;*/
            height: 2px;
    border: 1px solid red;
/*            margin-top: -2px;*/
    background: red;
}

這樣就會出現
這樣的效果。
爲了出現demo的效果。我們需要對僞元素就行定位。

ps：僞元素插入默認是行內元素。

下面看看demo的代碼：

    <nav class="main-nav" id="main-nav">

        <a href="/" class="home">
    Blog
  </a>
        <a href="/video-screencasts/" class="videos">
    Videos
  </a>
        <a href="/almanac/" class="almanac">
    Almanac
  </a>
        <a href="/snippets/" class="snippets">
    Snippets
  </a>
        <a href="/forums/" class="forums">
    Forums
  </a>
        <a href="/jobs/" class="jobs">
    Jobs
  </a>
        <a href="/lodge/" class="lodge">
    Lodge
  </a>
    </nav>

關鍵在於樣式：

        body {
            background-color: #abcdef;
        }

        .main-nav {
            display: flex;
        }

        .main-nav>a {
            padding: 15px;
            color: white;
            position: relative;
            display: inline-block;
            text-decoration: none;
            transition: all .3s ease-out;
        }

        .main-nav>a.home::before,
        .main-nav>a.home:hover,
        .main-nav>a.home:active,
        body.home .main-nav>a.home {
            background: #e18728;
            color: lightpink;
        }

        .main-nav>a.home::before {
            position: absolute;
            left: 0;
            top: 0;
            content: "";
            width: 100%;
            height: 2px;
            margin-top: -2px;
        }

        .main-nav>a.videos::before,
        .main-nav>a.videos:hover,
        .main-nav>a.videos:active,
        body.page-template-video-archive-php .main-nav>a.videos,
        body.page-template-video-single-php .main-nav>a.videos {
            background: #BE4C39;
        }

        .main-nav>a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            margin-top: -2px;
            height: 2px;
            width: 100%;
        }

        .main-nav>a.almanac::before,
        .main-nav>a.almanac:hover,
        .main-nav>a.almanac:active,
        body.page-template-page-almanac-group-php .main-nav>a.almanac,
        body.page-template-page-almanac-single-php .main-nav>a.almanac {
            background: #9351A6;
        }

        .main-nav>a.snippets::before,
        .main-nav>a.snippets:hover,
        .main-nav>a.snippets:active,
        body.page-template-page-snippet-cat-php .main-nav>a.snippets,
        body.page-template-page-snippet-php .main-nav>a.snippets {
            background: #4472B9;
        }

        .main-nav>a.forums::before,
        .main-nav>a.forums:hover,
        .main-nav>a.forums:active,
        body.bbpress .main-nav>a.forums {
            background: #4CA454;
        }

        .main-nav>a.jobs::before,
        .main-nav>a.jobs:hover,
        .main-nav>a.jobs:active,
        body.page-template-jobs-php .main-nav>a.jobs {
            background: #d49b00;
        }

        .main-nav>a.lodge::before,
        .main-nav>a.lodge:hover,
        .main-nav>a.lodge:active,
        body.page-template-page-lodge-php .main-nav>a.lodge,
        body.page-template-lodge-signup-php .main-nav>a.lodge,
        body.page-template-page-lodge-group-php .main-nav>a.lodge,
        body.page-template-lodge-video-php .main-nav>a.lodge {
            background: #444444;
        }