CSS偽類對象before和after的用法實例詳解

2024-07-11 08:28:38

字體：大中小

來源：轉載

供稿：網友

一直感覺這兩個偽類對象不是很重要，并且IE對它兩兄弟并不支持，所以也沒有怎么靜下心來研究，只有在清楚浮動clearfix的時候會用到哈，其他都很少用！不過最近在研究css3的時候覺得它兩個的搭配不僅能夠減少代碼量并且能整出很巴適的效果，所以就來研究研究哈！

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

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

2、selector:after( sRules ) 和before用法一樣，不過它是設置在對象后（依據對象樹的邏輯結構）發生的內容；

看例子容易理解些！

復制代碼

代碼如下:
<style>
.div{width:350px; border:1px solid #000; line-height:50px; margin:10px;}
.divb{width:500px; border:1px solid #FC0;}
.after,.before,.block{border:1px solid #330;}
.after:after{content:'我在后面吧'; color:#F00;}
.before:before{content:'我在前面吧'; color:#F00;}
.block:after{content:'我是塊元素，我占一行'; color:#F00; display:block;}
.block{display:block;}
</style>
<body>
<div class="div">after<span class="after">我是里面的內容</span></div>
<div class="div">before<span class="before">我是里面的內容</span></div>
<div class="divb">block<span class="block">我是里面的內容</span></div>
</body>

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

下面我們來看看css3的配合著它的應用是哪樣的？

復制代碼

代碼如下:
<style>
.bottle{width:100px; position:relative;}
.bottle_top{position:relative; width:80px; height:30px; border:1px solid rgba(255,255,255,0.5);border-bottom:0 none; border-top:0 none; margin:0 auto;}
.bottle_top:after,.bottle_top:before{content:''; display:block; height:10px; width:78px; border-radius:46px/10px; border:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.4);border-top:1px solid rgba(255,255,255,.6); position:absolute; left:-1px;box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset;}
.bottle_top:after{top:-6px;box-shadow:0px 0px 6px rgba(255,255,255,0.6) inset,0px 3px 3px -1px rgba(255,255,255,0.3);}
.bottle_top:before{top:24px;box-shadow:0px 0px 6px rgba(255,255,255,.4) inset;}
.bottle_mouth{height:52px; width:44px; margin:0 auto; position:relative; background:none; border:1px solid rgba(0,0,0,0.04);border-top:none; border-bottom:none;background:-moz-linear-gradient(left,rgba(255,255,255,0.3),rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(255,255,255,0.3)); box-shadow:0px 0px 6px rgba(255,255,255,0.3);}
.bottle_mouth:after{height:6px; width:44px; content:''; display:block; border-radius:25px/6px;border:1px solid rgba(255,255,255,.4); position:absolute; left:-1px; top:-4px;z-index:1; box-shadow:0px 0px 3px rgba(255,255,255,0.3);}
.bottle_top .highlight{width:20px; height:30px; display:block; position:absolute; left:5px; top:5px; -moz-transform:skew(0deg,5deg);background:-moz-linear-gradient(left,rgba(255,255,255,0.1),rgba(255,255,255,0.6) 4%,rgba(255,255,255,0.2) 98%,rgba(255,255,255,0));}
.bottle_top .highlight:after{content:''; display:block; width:2px; height:30px; position:absolute; top:-1px; left:-3px; -moz-transform:skew(0deg,5deg); background:rgba(255,255,255,.3);}
</style>
<body>
<div class="main">
<div class="bottle">
<div class="bottle_top">
<div class="bottle_mouth"></div>
<div class="highlight"></div>
</div>
</div>
</div>
</body>

上一篇：CSS3 實用技巧：實現黑白圖像效果示例代碼

下一篇：CSS工作原理及CSS規則命名介紹

發表評論

共有條評論