目前css3中伪元素共有5个 分别是:first-line, :first-letter, :selection, :before 和 :after，前面三个伪元素我目前没有看到过，可能是我不是做前端的，没有怎么注意。:before :after在实际去开发中遇到的挺多的。本文主要讲一下:before :after两个伪元素
什么是伪元素
伪元素，就是本身不存在的页面元素，HTML代码里并没有这样的元素，但在页面显示时，你却能看到这些本来不存在的元素发挥着作用
伪元素发展过程
早在CSS1里就已经有了伪元素的概念,:before 和 :after 这两个伪元素，是在CSS2.1里新出现的,起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before 和 ::after
不论你使用单冒号还是双冒号语法，浏览器都能识别。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号
:before 和 :after 举例与使用方法
<style type="text/css">
body{
font-family: cursive;
font-size: 14px;
}
.left{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.left:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -30px;
top: 10px;
border: 15px solid;
border-color: transparent green transparent transparent;
}
.left:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: -27px;
top: 10px;
border: 15px solid;
border-color: transparent #fff transparent transparent;
}
.right{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.right:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -30px;
top: 10px;
border: 15px solid;
border-color: transparent transparent transparent green;
}
.right:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
right: -27px;
top: 10px;
border: 15px solid;
border-color: transparent transparent transparent #fff;
}
.up{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.up:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left:60px;
top: -30px;
border: 15px solid;
border-color: transparent transparent green transparent ;
}
.up:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left:60px;
top: -27px;
border: 15px solid;
border-color: transparent transparent #fff transparent;
}
.down{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.down:before{
content: ' ';
position: absolute;
width: 0;
height: 0;
left:60px;
top: 50px;
border: 15px solid;
border-color: green transparent transparent transparent ;
}
.down:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left:60px;
top: 48px;
border: 15px solid;
border-color: #fff transparent transparent transparent ;
}
.line{
width:150px;
height: 50px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 50px;
text-align: center;
border: 2px solid green;
border-radius: 5px;
}
.line:before{
border-bottom: 1px solid #3ca156;
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
content: '';
width: 92px;
position: absolute;
left: 30px;
top: 50%;
}
.line:after{
border-bottom: 1px solid #3ca156;
-webkit-transform: skewY(-30deg);
transform: skewY(-30deg);
content: '';
width: 92px;
position: absolute;
left: 30px;
top: 50%;
}
.fork{
color: #fff;
width:150px;
height: 60px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 60px;
text-align: center;
background: green;
}
.fork:before{
content: "";
border: 30px solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0px;
left: 0px;
}
.fork:after{
content: "";
border: 30px solid;
border-color: transparent transparent transparent green;
position: absolute;
top: -0px;
right: -60px;
}
.fork-left{
color: #fff;
width:150px;
height: 60px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 60px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-left:before{
content: "";
border: 30px solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 0px;
left: 0px;
}
.fork-right{
color: #fff;
width:150px;
height: 60px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 60px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-right:after{
content: "";
border: 30px solid;
border-color: transparent #fff transparent transparent;
position: absolute;
top: 0px;
right: 0;
}
.fork-up{
color: #fff;
width:60px;
height: 150px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 150px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-up:after{
content: "";
border: 30px solid;
border-color: transparent transparent #fff transparent;
position: absolute;
top: 90px;
right: 0;
}
.fork-down{
color: #fff;
width:60px;
height: 150px;
background: #fff;
position: relative;
margin: 50px 0 0 50px;
line-height: 150px;
text-align: center;
background: green;
border-radius: 5px;
}
.fork-down:before{
content: "";
border: 30px solid;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 0;
right: 0;
}
</style>
<div class='left' style="float:left">left</div>
<div class='right' style="float:left">right</div>
<div class='up' style="float:left">up</div>
<div class='down' style="float:left">down</div>
<div class='line' style="float:left">line</div>
<div class='fork'style="float:left">fork</div>
<div class='fork-left'>fork-left</div>
<div class='fork-right'>fork-right</div>
<div class='fork-up'>fork-up</div>
<div class='fork-down'>fork-down</div>
QQ交流群：136351212查看原文：http://www.phpsong.com/2460.html
转载请注明原文地址: https://ju.6miu.com/read-1203856.html
