也玩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;
        }

版权声明：本文为博主原创文章，未经博主允许不得转载。