CSS偽類:before在元素之前 :after 在元素之后實例講解

2024-07-11 08:29:18

字體：大中小

來源：轉載

供稿：網友

本教程簡單的介紹一下關于CSS偽類:before, :after詳解，有需要了解的朋友可以參考一下下。
:before 偽元素在元素之前添加內容
這個偽元素允許創作人員在元素內容的最前面插入生成內容。默認地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點。

:after 偽元素在元素之后添加內容
這個偽元素允許創作人員在元素內容的最后面插入生成內容。默認地，這個偽元素是行內元素，不過可以使用屬性 display 改變這一點。

復制代碼

代碼如下:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>偽類導個航..</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.survivalescaperooms.com>《回來鋤草..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="chengdu">12.10 成都</span>
</div>
<div id="tips">Tips: 你用IE6 IE7, 那就活該你看不到效果...</div>
<div id="footer"></div>
</body>
</html>

上一篇：min-height和min-width兩個最小高度和最小寬度兼容多瀏覽器版本

下一篇：IE6中有一個BUG叫border邊框斷線現象(border邊框部分消失)

發表評論

共有條評論