TShopping

 找回密碼
 註冊
搜索
查看: 498|回復: 0

[教學] CSS偽類對象before和after的用法

[複製鏈接]
發表於 2014-12-24 15:29:43 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
一直感覺這兩個偽類對像不是很重要,並且IE對它兩兄弟並不支持,所以也沒有怎麼靜下心來研究,只有在清楚浮動clearfix的時候會用到哈,其他都很少用!不過最近在研究css3的時候覺得它兩個的搭配不僅能夠減少代碼量並且能整出很巴适的效果,所以就來研究研究哈!

一、先來看哈他們的定義哈!

1、selector:before( sRules ) 它要和content屬性一起使用,設置在對象前(依據對象樹的邏輯結構)發生的內容;

2、selector:after( sRules ) 和before用法一樣,不過它是設置在對像後(依據對象樹的邏輯結構)發生的內容;

看例子容易理解些!
  1. <style>

  2. .div{width:350px; border:1px solid #000; line-height:50px; margin:10px;}

  3. .divb{width:500px; border:1px solid #FC0;}
  4. .after,.before,.block{border:1px solid #330;}
  5. .after:after{content:'我在后面吧'; color:#F00;}
  6. .before:before{content:'我在前面吧'; color:#F00;}
  7. .block:after{content:'我是块元素,我占一行'; color:#F00; display:block;}
  8. .block{display:block;}

  9. </style>

  10. <body>

  11. <div class="div">after<span class="after">我是里面的内容</span></div>
  12.   <div class="div">before<span class="before">我是里面的内容</span></div>
  13.   <div class="divb">block<span class="block">我是里面的内容</span></div>

  14. </body>
複製代碼


1.jpg
運行結果如圖!我為什麼要把<span class="block">轉換為塊級元素呢?因為塊元素插入內聯元素不符合標準,不規範,不轉化的話顯示有問題。我也不清楚.

 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-9 15:59 , Processed in 0.062819 second(s), 25 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表