before與after的一些應用總結

標籤：通過   定義   字串   tar   技術   應用   attr   邏輯   功能   

一、虛擬元素介紹

css3為了區分偽類和虛擬元素，虛擬元素採用雙冒號寫法（單冒號也是可以使用的）

　　常見偽類——:hover,:link,:active,:target,:not(),:focus（文本輸入框聚焦）。

　　常見虛擬元素——::first-letter,::first-line,::before,::after,::selection。

:before和:after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部新增內容。這些添加操作不會出現在DOM中，也不會改變文檔內容，不可複製，僅僅是在css渲染的時候加入。

所以不要用:before或:after展示有實際意義的內容，盡量使用它們顯示修飾性內容。例如添加icon,圖片，連結，背景遮罩等；

這是添加一個背景色的效果  

  <style>        div{            width:100px;            height:60px;            line-height:60px;            text-align:center;            border:1px solid #F00;            position:relative;        }        div  span        div:before{            content:‘‘;            width:100px;            height:60px;            background:#F0F;            opacity:0.5;            position:absolute;            top:0;            left:0;                display:none;                    }        div:hover:before{            display:block;        }    </style></head><body>    <div>        <span>首頁</span>    </div></body>

二、content屬性

:before和:after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。預設情況下，偽類元素的display是預設值inline，可以通過設定display:block來改變其顯示。

content可取以下值。

1、string

使用引號包一段字串，將會向元素內容中添加字串。如：p:after{content:"@@"}

2、attr()

通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者連結的href地址顯示出來。

3、counter()

調用計數器，可以不使用列表元素實現序號功能。

4、attr()

通過attr()調用當前元素的屬性，比如將圖片alt提示文字或者連結的href地址顯示出來。

 

 

清除浮動
.clearfix:after{ content:""; display:block;clear:both;}

 

before與after的一些應用總結