CSS的before和after

before和after是偽元素，顧名思義就是元素的「前」與「後」，可以在指定元素的前後插入其他內容。

範例：

加入before和after後

CSS

.demo-1:before{ content:"一化科技－"; color:#257DB4; font-size:28px;}

.demo-1:after{ content:"的專業首選";color:#DF5D22;}

「content」為before與 after必須設置的屬性，意思是插入的「內容」，可以是圖片、文字等等，若未填此屬性，偽元素將不會發生任何作用。

例：content:url ( "img/logo.png" )

例：content:"一化科技"

若不需要內容的話，可以寫成content:""

以下我們來介紹幾項應用範例：

1.清除浮動

常常清除浮動是設個div{clear:both}，但如此一來便會多個無意義的空白元素，我們可以利用after來清浮動。

例：

.demo-3{float:left;}

.demo-3:after{ content:""; clear:both; display:none; width:0;}

2.配合attr使用

attr是取得選取元素的屬性，例如attr(href)是取得href屬性

以下例子是取得a的title屬性：

a::before{content:attr(title)}

效果相當於

3.特效

可以做出在鼠標靠近時文字增加外框的特效

例：

E-Work

Html 

CSS

.demo-2:before, .demo-2 after{ position:absolute;}

.demo-2 a:hover:before, .demo-2 a:hover:after{color:#F48627;}

.demo-2 a:hover:after{ right:-20px; content:"]";}

.demo-2 a:hover:before{ content:"[";left:-20px;}

製作陰影       

可以運用偽元素、box-shadow以及z-index:-1來做兩邊陰影。

範例：

Html

CSS

.box{ width:300px; height:200px;

        background:#A7C7D3;

        position:relative;

        box-shadow:0 0 3px rgba(0, 0, 0, 0.2); }

.box:before, .box:after{ width:50%;

                                      background:#000;

                                      z-index:-1;

                                      position: absolute; top:10px; bottom:15px; left:10px;

                                      content:"";

                                      box-shadow:0 15px 10px rgba(0, 0, 0, 0.5);                                      

　　　　　　　　　     -webkit-transform: rotate(-3deg);

                                     -moz-transform:rotate(-3deg);

                                     -o-transform:rotate(-3deg);

                                     -ms-transform:rotate(-3deg);

                                     transform: rotate(-3deg);}

.box:after{ right:10px; left:auto;

                 -webkit-transform:rotate(3deg);

                 -moz-transform:rotate(3deg);

                 -o-transform:rotate(3deg);

                 -ms-transform:rotate(3deg);

                 transform: rotate(3deg);

                }

before和after的瀏覽器兼容性相當好，除了IE6 IE7以外不用加上前綴。且可以簡化網頁的html標籤和class數量。