本教程简单的介绍一下关于CSS伪类:before, :after详解，有需要了解的朋友可以参考一下下。

:before 伪元素在元素之前添加内容

这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

:after 伪元素在元素之后添加内容

这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

复制代码代码如下:

/*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;}

上面积实例，下面我们来一下介绍一下

复制代码代码如下:

css部份

复制代码代码如下:

/*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个条件出现了 – :before, :after伪类可以在不增加html代码量得情况下, 为元素增加效果】

说到了其中的伪类before,after. 正如其单词含义, 就是在作用的元素前, 或者后实现某些效果. 但是在兼容性上会有一些问题, IE8, IE8+, Chrome, Safari, Firefox.

【第2个条件 – border在宽高为0的元素上, 四个方向都是三角形】

很早之前看到过用纯css来实现一个折角的效果. 其实也是用的css中border的特性.

各位可以自己测试下, 给一个宽高都为0的元素加一个很宽的border, 同时, 给border的四个方向分别设置不同的颜色值. 之后会发现, border的上下左右都是三角形(这里是在宽高为0的情况下, 测试用.并不是说边框就是三角形..??~~). 也就是说, border四个方向的边框之间斜面紧密连接的.

【第3个条件 – border-color四个参数可以设置相邻两边透明, 另外两边同色, 即可出现三角形】

之后, border-color的属性值中有一个transparent(透明), 就像margin的定义一样, border-color有四个参数, 分别代表上, 右, 下, 左的颜色值. 这样只要将相邻两边的颜色设置为透明, 另外两边的颜色设置为相同颜色, 就会出现一个三角形.

在之后, 三角形的大小如何控制. 务必留意宽高为0的元素, 其大宽度边框的样子. 上下边框的和是元素实际的高度, 左右边框的和是元素的实际宽度, 所以, 不要惯性思维, 把一个边的宽高当做是实际的宽高. 这样计算的结果就会让人比较不解了..

下边这个很难看的demo是一个宽高为0的元素border

上边框: 80px #387399

右边框: 60px #4B4D0E

下边框: 40px #692A81

左边框: 20px #711A1A

【第4个条件 – 合理控制高度, 宽度】

css代码最上边有句注释, 说是要留意那几个值(border, margin, left, right). 原因在于, 需要让三角形跟内容部分高度一致, 同时还不会被旁边的元素盖住. 这就要计算一下了.

了解上边对border高度宽度的解释, 然后内容部分建议指定高度, 而不是用padding来撑开, 原因在于, 文字部分的高度因字体的不一致而有所不同, 很难精确控制高度. 当然, 如果阁下对字体研究的透彻程度已经达到惨绝人寰的程度, 那也可以试试..

before和after伪类的使用会占据一定的空间, 所以, 需要计算border的实际宽度, 然后将元素之间的间距, 适当增大, 至少增大到border的宽度(避免被后边的元素盖住三角形区域, 当然, 还有其他办法避免这种问题. 这里只是一提).