来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 今天发现很多国外的网站和框架设计都用到了before和after，之前使用的比较少，今天试了下觉得还是很有意思的~说明1 :before 和 :after将在内容元素的前后插入额外的元素；:before将会在内...
|
今天发现很多国外的网站和框架设计都用到了before和after，之前使用的比较少，今天试了下觉得还是很有意思的~
说明
1. :before 和 :after将在内容元素的前后插入额外的元素；:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。
2. :before 和 :after发布于CSS2.1, 在css3中修订后伪元素使用::,伪类使用:, 因而形式为:: before, ::after
3. 无论使用单引号还是双引号浏览器都能识别，但是IE8只支持单冒号格式，因而为兼容还是使用单冒号
简单例子
.div1:before{
content:open-quote;
}
.div1:after{
content:close-quote;
}
<div class="div1"> Today is a wonderful day. Wish you happy~</div>
结果：
“ Today is a wonderful day. Wish you happy~”
设置伪元素样式
eg1：
.div1{
width:500px;
height:200px;
margin:100px auto;
background-color:#F0F0F0;
line-height:200px;
text-align:center;
}
.div1:before{
content:open-quote;
position:relative;
font-size: 24pt;
line-height:200px;
text-align:center;
color:#fff;
background:#ddd;
border-radius:25px;
}
.div1:after{
content:close-quote;
position:relative;
font-size: 24pt;
background:#ddd;
border-radius:25px;
line-height:200px;
text-align:center;
color:#fff;
}
<div class="div1"> Today is a wonderful day. Wish you happy~</div>
结果：
注意：实际使用时注意将相同的css抽取，div[class*='']:before, div[class*='']:after
eg2：（与伪类结合使用）
添加样式：
.div1:hover:after,.div1:hover:before {
background-color: #555;
}
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
