Before和After用法小結

定義 :before 選擇器在被選元素的內容前面插入內容。:after選擇器在被選元素的內容後面插入內容。（注：必須包含content 屬性）

1、特性：不能左右:empty僞類

此表現說明，空元素內部使用僞元素生成的內容，是不被:empty僞類承認的，選擇器依然認爲這是個空元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不能左右:empty僞類</title>
    <style>
        .box{
            width: 256px;
            height: 90px;
            padding: 10px;
            background-color: red;
            color:#fff;
        }
        .box:empty{
            opacity: .1;
        }
        .pseudo{
            content: "僞元素生成內容";
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="title">有內容</div>
        <div class="box">有內容</div>
    </div>

    <div class="item">
        <div class="title">無內容</div>
        <div class="box"></div>
    </div>

    <div class="item">
        <div class="title">空格也算內容</div>
        <div class="box"> </div>
    </div>

    <div class="item">
        <div class="title">僞元素不算內容</div>
        <div class="box pseudo"></div>
    </div>
</body>
</html>

View Code

2、特性：content動態呈現值沒法獲取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            counter-reset: icecream;
        }
        input:checked {
            counter-increment: icecream;
        }
        .total::after {
            content: counter(icecream);
        }
    </style>
</head>
<body>
    <strong>下面中國十大冰淇淋你吃過幾個？</strong>
    <ul>
        <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根達斯</label></li>
        <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>
        <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>
        <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>
        <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>
        <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>
        <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>
        <li><input type="checkbox" id="icecream8"><label for="icecream8">樂可可冰淇淋</label></li>
        <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>
        <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>
    </ul>
    你總共選擇了 <strong class="total"></strong> 款冰淇淋！
</body>
</html>

View Code

3、用法：清除浮動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:before,.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; }
        .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */
        .box div{width: 200px;height: 200px;background-color: red;margin-right: 20px;margin-bottom: 20px;float: left; }
        .test{clear: both;margin-top: 80px}
    </style>
</head>
<body>
    <div class="test">測試一：</div>
    <div class="box"><div></div><div></div></div>
    <div class="box"><div></div><div></div></div>

    <!--*********************************************************-->

    <div class="test">測試二：</div>
    <div class="box clearfix"><div></div><div></div></div>
    <div class="box"><div></div><div></div></div>
</body>
</html>

View Code

4、用法：作時間軸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            width: 635px;
            height: 100px;
            padding: 20px;
            list-style: none;
            background-color: #f5f5f5;
        }
        li{
            text-align: center;
            position: relative;
            float: left;
            padding: 2px 110px 2px 12px;
        }
        .cusicon{
            margin: 0 auto 15px auto;
            position: relative;
        }

        .tip,.time{
            position: absolute;
            left: -40px;
            text-align: center;
            width: 140px;
            font-size: 14px;
        }
        .time{
            top:75px;
            font-size: 12px;
        }

        .last:before{
            width: 0!important;
        }
        .cusicon:before{
            content:"";
            width: 100px;
            height: 3px;
            position: absolute;
            top:17px;
            right:-115px;
            background-color: #b3b3b3;
        }
        li.active .cusicon{
            background: url(sprite.png) -0px -72px no-repeat;
            width: 100%;
            height: 100%;
            _background: none;
            _padding-left: 0px;
            _margin-left: -0px;
            _padding-top: 72px;
            _margin-top: -72px;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");
        }

        li.active .cusicon:before{
            background-color: red!important;
        }
        .cusicon {
            height: 36px!important;
            width: 36px!important;
        }
        .cusicon_1 {
            background: url(sprite.png) -0px -0px no-repeat;
            width: 100%;
            height: 100%;
            _background: none;
            _padding-left: 0px;
            _margin-left: -0px;
            _padding-top: 0px;
            _margin-top: -0px;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");
        }
        .cusicon_2 {
            background: url(sprite.png) -36px -0px no-repeat;
            width: 100%;
            height: 100%;
            _background: none;
            _padding-left: 36px;
            _margin-left: -36px;
            _padding-top: 0px;
            _margin-top: -0px;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");
        }
        .cusicon_3 {
            background: url(sprite.png) -0px -36px no-repeat;
            width: 100%;
            height: 100%;
            _background: none;
            _padding-left: 0px;
            _margin-left: -0px;
            _padding-top: 36px;
            _margin-top: -36px;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");
        }
        .cusicon_4 {
            background: url(sprite.png) -36px -36px no-repeat;
            width: 100%;
            height: 100%;
            _background: none;
            _padding-left: 36px;
            _margin-left: -36px;
            _padding-top: 36px;
            _margin-top: -36px;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");
        }
        .cusicon_5 {
            background: url(sprite.png) -72px -0px no-repeat;
            width: 100%;
            height: 100%;
            _background: none;
            _padding-left: 72px;
            _margin-left: -72px;
            _padding-top: 0px;
            _margin-top: -0px;
            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");
        }
    </style>
</head>
<body>
<ul>
    <li class="active">
        <div class="cusicon cusicon_1"></div>
        <div class="tip">
            發佈項目
        </div>
        <div class="time">2015-04-02</div>
    </li>
    <li class="active">
        <div class="cusicon cusicon_2"></div>
        <div class="tip">
            設計師報名
        </div>
        <div class="time"></div>
    </li>
    <li>
        <div class="cusicon cusicon_3"></div>
        <div class="tip">
            選擇設計師/備案
        </div>
        <div class="time"></div>
    </li>
    <li>
        <div class="cusicon cusicon_4 last"></div>
        <div class="tip">
            確認完工
        </div>
        <div class="time"></div>
    </li>
</ul>
</body>
</html>

View Code

5、用法：字體文字（例如ionicfont等）

6、按鈕及佈局特效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        html{height: 100%;}
        body{
            margin: 0;
            background-color: #f2f2f2;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .btn{
            width: 570px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            background-color: #fff;
        }
        .btn{position:relative;}
        .btn:before, .btn:after {
            z-index: -1;
            position: absolute;
            content: "";
            bottom: 15px;
            left: 5px;
            width: 50%;
            top: 80%;
            max-width: 300px;
            background: #777;
            -webkit-box-shadow: 0 15px 10px #777;
            -moz-box-shadow: 0 15px 10px #777;
            box-shadow: 0 15px 10px #777;
            -webkit-transform: rotate(-3deg);
            -moz-transform: rotate(-3deg);
            -o-transform: rotate(-3deg);
            -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);
        }
        .btn:after {
            -webkit-transform: rotate(3deg);
            -moz-transform: rotate(3deg);
            -o-transform: rotate(3deg);
            -ms-transform: rotate(3deg);
            transform: rotate(3deg);
            right: 10px;
            left: auto;
        }

    </style>
</head>
<body>
    <div class="btn"> SIGN IN </div>
</body>
</html>

View Code

7、兼容性

Chrome 2+
Firefox 3.5+ (3.0 had partial support)
Safari 1.3+
Opera 9.2+
IE8+ (with some minor bugs
幾乎全部的移動瀏覽器
惟一真正的問題是沒有得到支持的（不用奇怪）IE6和IE7

8、注意事項

因爲僞元素不是真正的元素，因此不會出如今DOM中。所以，它們不是可用的。因此，不要使用僞元素生成內容，是您的網頁的可用性和可訪問性的關鍵。
因爲僞元素難以維護和調試緩慢，因此不要用僞元素顯示內容。