:before/:after與::before/::after的區別 和屬性content:值

一、偽元素和偽類是非常相像的兩個東西。在實際上 css3 為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。

:Pseudo-classes
::Pseudo-elements

但因為兼容性的問題，所以現在大部分還是統一的單冒號，但是拋開兼容性的問題，我們在書寫時應該盡可能養成好習慣，區分兩者。

 

二、基本用法：

p::after{} 
img::before{}

這兩個偽類下特有的屬性 content ，用於在 CSS 渲染中向元素邏輯上的頭部或尾部添加內容。注意這些添加不會改變文檔內容，不會出現在 DOM 中，不可復制，僅僅是在 CSS 渲染層加入。

注：img使用content:的attr()/url()時不用加::after/::before

　　input沒有content屬性

content的內容一般可以為以下四種：

 none： 不生成任何值。
 attr()： 插入標簽屬性值。通常和自定義屬性data-配合使用，因為傳統的其它屬性雖然也能存值，但通常不適合存放表達性文字。括號內不加引號。

  <div data-line="1"></div>

     div[data-line]:after { content: attr(data-line);/* 屬性名稱上不要加引號！ */ 

 url()： 使用指定的絕對或相對地址插入一個外部資源（圖像，聲頻，視頻或瀏覽器支持的其他任何資源）。括號內不加引號。
 string： 插入字符串。加引號。
 counter()：調用計數器，可以不適用列表元素實現序號功能。具體參見counter-increment和counter-reset屬性的用法。

 h2:before { counter-increment: chapter; content: "Chapter " counter(chapter) ". " }

二、進階用法：

1.清除浮動

.clearfix {*zoom: 1;}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}

.clearfix:after {
    clear: both;
}

 

2.制作三角：

.c-main:before{    
    content: '';    
    border-top: 9px solid transparent;/*方框上部分背景顏色為透明*/
    border-bottom: 9px solid transparent;/*方框下部分背景為透明*/
    border-right: 9px solid #eee;/*箭頭背景顏色*/
    position: absolute;/*絕對定位1*/
    top: 25px;/*距離頂部位置偏移量2*/
    left: -9px;/*距離左邊位置偏移量3*/ /*123都是控制顯示位置的*/
    }


.c-main:after{    
    content: '';    
    border-top: 7px solid transparent;    
    border-bottom: 7px solid transparent;    
    border-right: 7px solid #fbfdfb;/*箭頭背景顏色，覆蓋前面的#eee顏色，使其顏色與整體顏色一致*/
    position: absolute;    
    top: 27px;    
    left: -7px;    
}                               

3. css 里添加  iconfont圖標：

在 content:"  ";  里寫css的圖標轉譯字符。例子：content:" \e673"；

要點：把下載后的iconfont類名下面的”初始定義“復制一份給自定義偽類before，才能生效。