CSS偽類:before在元素之前 :after 在元素之后實例講解
發(fā)布時間：2012-12-18 11:15:36 作者：佚名 
我要評論
我要評論本教程簡單的介紹一下關(guān)于CSS偽類:before, :after詳解:before 偽元素在元素之前添加內(nèi)容;after 偽元素在元素之后添加內(nèi)容;有需要了解的朋友可以參考一下
本教程簡單的介紹一下關(guān)于CSS偽類:before, :after詳解，有需要了解的朋友可以參考一下下。
:before 偽元素在元素之前添加內(nèi)容
這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面.插入生成內(nèi)容。默認(rèn)地，這個偽元素是行內(nèi)元素，不過可以使用屬性 display 改變這一點。
:after 偽元素在元素之后添加內(nèi)容
這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最后面.插入生成內(nèi)容。默認(rèn)地，這個偽元素是行內(nèi)元素，不過可以使用屬性 display 改變這一點。
復(fù)制代碼
代碼如下:<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>偽類導(dǎo)個航..</title>
<style type="text/css">
/*css部分, 留意其中border, margin, left, right的取值*/
body{background:#EEE;margin:0px;padding:0px;font-size:14px;font-family:Microsoft Yahei;color:#FFF;}
#nav_demo{overflow:hidden;width:520px;margin:100px auto 0px;}
#nav_demo span{float:left;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;}
.shenzhen{background:#4FA3DA;}
.guangzhou{background:#666912;}
.shanghai{background:#9B44BC;}
.beijing{background:#9B2222;}
.chengdu{background:#804B12;}
.shenzhen:hover{background:#387399;}
.guangzhou:hover{background:#4B4D0E;}
.shanghai:hover{background:#692A81;}
.beijing:hover{background:#711A1A;}
.chengdu:hover{background:#59390E;}
.shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{
border-style:solid;
border-width:15px 10px;
content:"";
height:0;
position:absolute;
top:0;
width:0;
}
.shenzhen:before{border-color:#4FA3DA #4FA3DA transparent transparent;left:-20px;}
.guangzhou:before{border-color:#666912 #666912 transparent transparent;left:-20px;}
.shenzhen:after{border-color:transparent transparent #4FA3DA #4FA3DA;right:-20px;}
.guangzhou:after{border-color:transparent transparent #666912 #666912;right:-20px;}
.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:-20px;}
.guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:-20px;}
.shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:-20px;}
.guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:-20px;}
#tips{float:right;margin-right:200px;margin-top:20px;color:#8BA612;width:280px;background:#333;border:solid 1px #000;padding:5px 10px;}
#header{position:absolute;top:0px;width:100%;height:30px;line-height:30px;background:#333;border-bottom:solid 1px #000;}
#header span{padding-left:30px;padding-right:10px;}
#header a{text-decoration:none;color:#8BA612;}
#header a:hover{text-decoration:underline;}
#footer{position:absolute;bottom:0px;width:100%;text-align:center;height:30px;line-height:30px;background:#333;border-top:solid 1px #000;}
#footer a{color:#8BA612;text-decoration:none;padding-left:5px;}
#footer a:hover{text-decoration:underline;}
</style>
</head>
<body>
<div id="header"><span>返回</span><a href=http://www.dbjr.com.cn>《回來鋤草..CSS偽類:before, :after》</a></div>
<div id="nav_demo">
<span class="shenzhen">8.29 深圳</span>
<span class="guangzhou">9.10 廣州</span>
<span class="shanghai">10.15 上海</span>
<span class="beijing">11.12 北京</span>
<span class="<strong><strong>chengdu</strong></strong>">12.10 成都</span>
</div>
<div id="tips">Tips: 你用IE6 IE7, 那就活該你看不到效果...</div>
<div id="footer"></div>
</body>
</html>
上面積實例，下面我們來一下介紹一下
復(fù)制代碼
代碼如下:<!--只有第一第二個加了效果(深圳.廣州)-->
<div id="nav_demo">
<span class="shenzhen">8.29 深圳</span>
<span class="guangzhou">9.10 廣州</span>
<span class="shanghai">10.15 上海</span>
<span class="beijing">11.12 北京</span>
<span class="chengdu">12.10 成都</span>
</div>
css部份
復(fù)制代碼
代碼如下:/*css部分, 留意其中border, margin, left, right的取值*/
#nav_demo{margin-top:20px;margin-left:20px;font-size:12px;font-family:Microsoft Yahei;overflow:hidden;}
#nav_demo span{float:left;color:#FFF;position:relative;padding:0px 10px;height:30px;line-height:30px;margin-left:20px;cursor:pointer;}
.shenzhen{background:#4FA3DA;}
.guangzhou{background:#666912;}
.shanghai{background:#9B44BC;}
.beijing{background:#9B2222;}
.chengdu{background:#804B12;}
.shenzhen:hover{background:#387399;}
.guangzhou:hover{background:#4B4D0E;}
.shanghai:hover{background:#692A81;}
.beijing:hover{background:#711A1A;}
.chengdu:hover{background:#59390E;}
.shenzhen:before,.shenzhen:after,.guangzhou:before,.guangzhou:after{
border-style:solid;
border-width:15px 10px;
content:"";
height:0;
position:absolute;
top:0;
width:0;
}
.shenzhen:before{border-color:#4FA3DA #4FA3DA transparent transparent;left:-20px;}
.guangzhou:before{border-color:#666912 #666912 transparent transparent;left:-20px;}
.shenzhen:after{border-color:transparent transparent #4FA3DA #4FA3DA;right:-20px;}
.guangzhou:after{border-color:transparent transparent #666912 #666912;right:-20px;}
/* 偽類可以像下邊這樣疊加使用...*/
.shenzhen:hover:before{border-color:#387399 #387399 transparent transparent;left:-20px;}
.guangzhou:hover:before{border-color:#4B4D0E #4B4D0E transparent transparent;left:-20px;}
.shenzhen:hover:after{border-color:transparent transparent #387399 #387399;right:-20px;}
.guangzhou:hover:after{border-color:transparent transparent #4B4D0E #4B4D0E;right:-20px;}
【第1個條件出現(xiàn)了 – :before, :after偽類可以在不增加html代碼量得情況下, 為元素增加效果】
說到了其中的偽類before,after. 正如其單詞含義, 就是在作用的元素前, 或者后實現(xiàn)某些效果. 但是在兼容性上會有一些問題, IE8, IE8+, Chrome, Safari, Firefox.
【第2個條件 – border在寬高為0的元素上, 四個方向都是三角形】
很早之前看到過用純css來實現(xiàn)一個折角的效果. 其實也是用的css中border的特性.
各位可以自己測試下, 給一個寬高都為0的元素加一個很寬的border, 同時, 給border的四個方向分別設(shè)置不同的顏色值. 之后會發(fā)現(xiàn), border的上下左右都是三角形(這里是在寬高為0的情況下, 測試用.并不是說邊框就是三角形..??~~). 也就是說, border四個方向的邊框之間斜面緊密連接的.
【第3個條件 – border-color四個參數(shù)可以設(shè)置相鄰兩邊透明, 另外兩邊同色, 即可出現(xiàn)三角形】
之后, border-color的屬性值中有一個transparent(透明), 就像margin的定義一樣, border-color有四個參數(shù), 分別代表上, 右, 下, 左的顏色值. 這樣只要將相鄰兩邊的顏色設(shè)置為透明, 另外兩邊的顏色設(shè)置為相同顏色, 就會出現(xiàn)一個三角形.
在之后, 三角形的大小如何控制. 務(wù)必留意寬高為0的元素, 其大寬度邊框的樣子. 上下邊框的和是元素實際的高度, 左右邊框的和是元素的實際寬度, 所以, 不要慣性思維, 把一個邊的寬高當(dāng)做是實際的寬高. 這樣計算的結(jié)果就會讓人比較不解了..
下邊這個很難看的demo是一個寬高為0的元素border
上邊框: 80px #387399
右邊框: 60px #4B4D0E
下邊框: 40px #692A81
左邊框: 20px #711A1A
【第4個條件 – 合理控制高度, 寬度】
css代碼最上邊有句注釋, 說是要留意那幾個值(border, margin, left, right). 原因在于, 需要讓三角形跟內(nèi)容部分高度一致, 同時還不會被旁邊的元素蓋住. 這就要計算一下了.
了解上邊對border高度寬度的解釋, 然后內(nèi)容部分建議指定高度, 而不是用padding來撐開, 原因在于, 文字部分的高度因字體的不一致而有所不同, 很難精確控制高度. 當(dāng)然, 如果閣下對字體研究的透徹程度已經(jīng)達(dá)到慘絕人寰的程度, 那也可以試試..
before和after偽類的使用會占據(jù)一定的空間, 所以, 需要計算border的實際寬度, 然后將元素之間的間距, 適當(dāng)增大, 至少增大到border的寬度(避免被后邊的元素蓋住三角形區(qū)域, 當(dāng)然, 還有其他辦法避免這種問題. 這里只是一提).
相關(guān)文章
- 在處理css的機制上，IE總是有很多讓人吐血的舉動，但對于他們現(xiàn)在的改進(jìn)力度還是值得高興的。2009-12-08
- 寫這篇文章的起因來自與毅博客的《美化段落文本 2》，在這篇文章的最后振之談到了關(guān)于:first-letter這樣的偽類元素的特點.2009-09-22
- css偽類偽元素域高級選擇器的介紹，需要的朋友可以參考一下2013-02-26
- CSS中存在一些比較特殊的屬性，稱之為偽類,它們之中最常用的就是定義鏈接的偽:link，:visited，:hover，:active等本文詳細(xì)介紹一下after的用法的用法，感興趣的朋友可以了2013-02-01
csshover.htc在IE7下使用:active偽類無效解決方法
相信做前端開發(fā)都知道，IE6、IE7都不支持:active偽類，IE6更甚，連:hover偽類都不支持。為了解決這個問題，一般都會引入一個csshover.htc文件來解決,本文將介紹解決此問題2012-12-24ie6不支持hover ie6 標(biāo)簽(除a標(biāo)簽)不支持偽類:hover解決方案
ie6環(huán)境下好多的標(biāo)簽除a標(biāo)簽都不支持偽類:hover，本人很是疑惑，于是搜集整理一番，曬出來和大家分享，希望對你們有幫助2012-12-21CSS中a標(biāo)簽樣式的“愛恨”原則：定義鏈接樣式的四個偽類
CSS為一些特殊效果準(zhǔn)備了特定的工具，我們稱之為“偽類”。本文將詳細(xì)介紹經(jīng)常用于定義鏈接樣式的四個偽類,需要的朋友可以參考下2012-12-10- 上面是偽類的正確順序，簡稱 lvha(love-ha)。你一直知道這個順序但是為什么這樣呢？原理是怎么樣的？2011-07-22
鏈接偽類（:hover）CSS背景圖片有閃動BUG的解決方法
IE6下鏈接偽類（:hover）CSS背景圖片有閃動BUG，主要原因ie會再一次請求這張圖片，或者說圖片沒被緩存。2011-04-28書寫css偽類時冒號后多個空格導(dǎo)致該規(guī)則失效
相信多數(shù)開發(fā)者不會多個空格。是偶然發(fā)現(xiàn)的，網(wǎng)上多數(shù)css格式化將壓縮后的css格式化后會發(fā)生這個情況。2011-01-12