好程式設計師web前端培訓系列分享css偽元素的實用技巧

　　好程式設計師 web 前端培訓系列分享 css 偽元素的實用技巧

　　 1.定義 ： 偽元素用於建立一些不在文件樹中的元素，併為其新增樣式。比如說，我們可以透過 :before :after 來在一個元素前、後增加一些文字，併為這些文字新增樣式。雖然使用者可以看到這些文字，但是這些文字實際上不在文件樹中。

2.偽元素的單雙冒號

在CSS2之前規範不明確的時，偽元素使用單冒號(:)來表示；

在CSS3規範中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類；但為了向上相容，現在用單冒號（:）也可以的。

3. 使用場景

下面運用before和after在元素前面和後面插入偽元素，實現一些有意思的小效果，程式碼和效果圖附上。

3.1用偽元素實現插入文字、字型圖示庫

3.1.1插入文字：

h1 :before   {

  content : "你好" ;    /* 在標題前面插入文字 並設定樣式 */  

  color :   pink ;

  font-size :   20 px ;

  width :   40 px ;

  height :   40 px ;    }

< h1 > 我是標題 </ h1 >

效果如下：

3.1.2插入iconfont字型圖示庫：

@ font-face   {

font-family :   'iconfont' ;

src :   url ( ' );

src :   url ( ' )   format ( 'embedded-opentype' ),

url ( ' )   format ( 'woff2' ),

url ( ' )   format ( 'woff' ),

url ( ' )   format ( 'truetype' ),

url ( ' )   format ( 'svg' ); }

h1 :before   {

font-family :   "iconfont"   !important ;

/* 一定要加 */

content :   "\e601" ;

color :   pink ;

font-size :   20 px ;

width :   40 px ;

height :   40 px ;}

< h1 > 我是標題 </ h1 >

根據效果圖可以看到偽元素是inline元素型別

3.2清除浮動

解決浮動導致的父元素高度塌陷的問題

. clear :after   {

      content :   "" ;

      display :   block ;

      clear :   both ;

  }

  ul {

      background : pink ;

  }

  li {

      float : left ;

      margin : 0   20 px ;}

  < ul   class = "clear" >

      < li > hello   world </ li >

      < li > hello   world </ li >

      < li > hello   world </ li >

      < li > hello   world </ li >

  </ ul >

3.3分割線效果

p :before{

     content : '' ;

     display : inline-block ;

     width : 100 px ;

     height : 2 px ;

     background : pink ;

     margin : 5 px ;

  }

  p :after{

     content : '' ;

     display : inline-block ;

     width : 100 px ;

     height : 2 px ;

     background : pink ;

     margin : 5 px ;

  }

 

< p > 分割線 </ p >

效果圖：

3.4對話方塊效果

div   {

width :   180 px ;

height :   36 px ;

line-height :   36 px ;

background :   #c0eeff ;

border-radius :   5 px ;

font-size :   14 px ;

text-align :   center ;

position :   relative ;}

div :before   {

content :   "" ;

position :   absolute ;

top :   10 px ;

left :   -14 px ;

/* 畫三角形 */

width :   0 ;

height :   0 ;

border-top :   10 px   solid   transparent ;

border-right :   20 px   solid   #c0eeff ;

border-bottom :   10 px   solid   transparent ;

border-left :   0   solid   #c0eeff ;

}

 

< div > 快來和我聊天吧 ~</ div >

效果圖如下：

3.5 相片層疊效果

div   {

width :   400 px ;

height :   300 px ;

border :   8 px   solid   #eee ;

position :   relative ;}

div   img   {

width :   100 % ;

height :   100 % ;}

div :before , div :after   {

content :   "" ;

position :   absolute ;

top :   0 ;

left :   0 ;

z-index :   -1 ;

width :   400 px ;

height :   300 px ;

border :   8 px   solid   #eee ;

transform :   rotate ( 8 deg );}

div :after   {

transform :   rotate ( -8 deg );}

 

< div >

< img   src = "https://gitee.com/ay8yt/imageStore/raw/master/%E4%BA%8C%E9%98%B6%E6%AE%B5%E5%A4%A7%E7%BA%B2/%E5%9B%BE%E7%89%87/QQ%E6%88%AA%E5%9B%BE20200417104911.png" ></ div >

效果圖如下：

總結

使用偽元素能實現的效果非常多，也可以減少網頁中標籤的使用，一起動手試試看偽元素的妙用技巧吧。