使用偽元素before和after


  HTML5增加了一系列的偽類選擇器和偽元素選擇器,增加的偽元素選擇器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文檔高亮部分,如鼠標選中文字)、::backdrop(不常用)。前面四者可能比較常用,會聚集到具體某一元素上,后面兩個屬於全局的元素。

  這里談一下::before和::after元素的使用。

  1、添加元素內容:

<!DOCTYPE html>
<html>
    <head>
        <title>添加元素內容</title>
        <meta charset="utf-8" />
        <style>
           p{ padding: 20px;}
           p:before{content: "我是before添加的內容"; font-weight: bold;}
           p:after{content: "我是after添加的內容"; font-style: italic}
        </style>
    </head>
    <body>
    <p>我是元素里面的內容</p>
    </body>
</html>

 

   在這里添加了元素內邊距,判斷before和after的位置是包含在content之中還是之外,結果如下:

我是元素里面的內容

   添加一個偽元素十分的簡單,必須設置content屬性,該元素才能展示出來(包括為空"")。並且可以發現偽元素的文字,默認是不能按照文本選擇的。

  2、展示列表的hover特效(利用偽元素制作動畫效果):

<!DOCTYPE html>
<html>
    <head>
        <title>展示邊框出現效果</title>
        <meta charset="utf-8" />
        <style>
            .hover>li{
                position: relative;
                float: left;
                width: 80px;
                list-style: none;
                text-align: center;
            }

            .hover>li:before{
                content: "";
                border-bottom: 2px solid #5ac;
                position: absolute;
                top: 20px;
                width: 0;
                left: 50%;
                transition: all linear .5s;
                padding-bottom: 20px;
            }
            .hover>li:hover:before{
                position: absolute;
                width: 100%;
                top: 20px;
                left: 0;
            }
        </style>
    </head>
    <body>
    <ul class="hover">
        <li>01組</li>
        <li>02組</li>
        <li>03組</li>
    </ul>
    </body>
</html>

  上面的代碼中,content,top及值,width,padding-bottom,transition都是必不可少的,只要有一點偏差就不能達到想要的效果。結果如下:

  • 01組
  • 02組
  • 03組

 

 

  3、由於這兩個偽類屬於元素的content部分,所以可以用來對元素進行邊框外形的設置:

<!DOCTYPE html>
<html>
    <head>
        <title>設置邊框樣式</title>
        <meta charset="utf-8" />
        <style>
            .border{
                position: relative;
                width:150px;
                height: 36px;
                border:1px solid black;
                border-radius:5px;
                background: #eee;
                margin-left: 50px;
            }
            .border:before,.border:after{
                content: "";
                display: block;
                position: absolute;
                top:8px;
                width: 0;
                height: 0;
                border:6px solid transparent;
            }
            .border:before{
                left:-11px;
                border-right-color: #eee;
                z-index:1
            }
            .border:after {
                left: -12px;
                border-right-color: black;
                z-index: 0
            }
        </style>
    </head>
    <body>
    <div class="border"></div>
    </body>
</html>

  通過before和after的定位,利用位置差值和顏色差異,將突出的小角展示出來。結果如下:

 

   利用這兩個偽元素可以很方便的為當前元素設置背景、圖標、動畫效果,而不用在添加額外的元素。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM