首页 > 代码库 > Before和After用法小结
Before和After用法小结
<style></style>
View Code
View Code
View Code
View Code
View Code
Before和After用法小结
定义 :before 选择器在被选元素的内容前面插入内容。:after选择器在被选元素的内容后面插入内容。（注：必须包含content 属性）
一、特性：不能左右:empty伪类
此表现说明，空元素内部使用伪元素生成的内容，是不被:empty伪类认可的，选择器依然认为这是个空元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>不能左右:empty伪类</title> <style> .box{ width: 256px; height: 90px; padding: 10px; background-color: red; color:#fff; } .box:empty{ opacity: .1; } .pseudo{ content: "伪元素生成内容"; } </style></head><body> <div class="item"> <div class="title">有内容</div> <div class="box">有内容</div> </div> <div class="item"> <div class="title">无内容</div> <div class="box"></div> </div> <div class="item"> <div class="title">空格也算内容</div> <div class="box"> </div> </div> <div class="item"> <div class="title">伪元素不算内容</div> <div class="box pseudo"></div> </div></body></html>
二、特性：content动态呈现值无法获取
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { counter-reset: icecream; } input:checked { counter-increment: icecream; } .total::after { content: counter(icecream); } </style></head><body> <strong>下面中国十大冰淇淋你吃过几个？</strong> <ul> <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li> <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall‘s</label></li> <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li> <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li> <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li> <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li> <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li> <li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li> <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li> <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li> </ul> 你总共选择了 <strong class="total"></strong> 款冰淇淋！</body></html>
三、用法：清除浮动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:before,.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; } .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */ .box div{width: 200px;height: 200px;background-color: red;margin-right: 20px;margin-bottom: 20px;float: left; } .test{clear: both;margin-top: 80px} </style></head><body> <div class="test">测试一：</div> <div class="box"><div></div><div></div></div> <div class="box"><div></div><div></div></div> <!--*********************************************************--> <div class="test">测试二：</div> <div class="box clearfix"><div></div><div></div></div> <div class="box"><div></div><div></div></div></body></html>
四、用法：做时间轴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul{ width: 635px; height: 100px; padding: 20px; list-style: none; background-color: #f5f5f5; } li{ text-align: center; position: relative; float: left; padding: 2px 110px 2px 12px; } .cusicon{ margin: 0 auto 15px auto; position: relative; } .tip,.time{ position: absolute; left: -40px; text-align: center; width: 140px; font-size: 14px; } .time{ top:75px; font-size: 12px; } .last:before{ width: 0!important; } .cusicon:before{ content:""; width: 100px; height: 3px; position: absolute; top:17px; right:-115px; background-color: #b3b3b3; } li.active .cusicon{ background: url(sprite.png) -0px -72px no-repeat; width: 100%; height: 100%; _background: none; _padding-left: 0px; _margin-left: -0px; _padding-top: 72px; _margin-top: -72px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="http://www.mamicode.com/sprite.png"); } li.active .cusicon:before{ background-color: red!important; } .cusicon { height: 36px!important; width: 36px!important; } .cusicon_1 { background: url(sprite.png) -0px -0px no-repeat; width: 100%; height: 100%; _background: none; _padding-left: 0px; _margin-left: -0px; _padding-top: 0px; _margin-top: -0px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="http://www.mamicode.com/sprite.png"); } .cusicon_2 { background: url(sprite.png) -36px -0px no-repeat; width: 100%; height: 100%; _background: none; _padding-left: 36px; _margin-left: -36px; _padding-top: 0px; _margin-top: -0px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="http://www.mamicode.com/sprite.png"); } .cusicon_3 { background: url(sprite.png) -0px -36px no-repeat; width: 100%; height: 100%; _background: none; _padding-left: 0px; _margin-left: -0px; _padding-top: 36px; _margin-top: -36px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="http://www.mamicode.com/sprite.png"); } .cusicon_4 { background: url(sprite.png) -36px -36px no-repeat; width: 100%; height: 100%; _background: none; _padding-left: 36px; _margin-left: -36px; _padding-top: 36px; _margin-top: -36px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="http://www.mamicode.com/sprite.png"); } .cusicon_5 { background: url(sprite.png) -72px -0px no-repeat; width: 100%; height: 100%; _background: none; _padding-left: 72px; _margin-left: -72px; _padding-top: 0px; _margin-top: -0px; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="http://www.mamicode.com/sprite.png"); } </style></head><body><ul> <li class="active"> <div class="cusicon cusicon_1"></div> <div class="tip"> 发布项目 </div> <div class="time">2015-04-02</div> </li> <li class="active"> <div class="cusicon cusicon_2"></div> <div class="tip"> 设计师报名 </div> <div class="time"></div> </li> <li> <div class="cusicon cusicon_3"></div> <div class="tip"> 选择设计师/备案 </div> <div class="time"></div> </li> <li> <div class="cusicon cusicon_4 last"></div> <div class="tip"> 确认完工 </div> <div class="time"></div> </li></ul></body></html>
五、用法：字体文字（例如ionicfont等）
六、按钮及布局特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> html{height: 100%;} body{ margin: 0; background-color: #f2f2f2; display: flex; justify-content: center; align-items: center; height: 100%; } .btn{ width: 570px; height: 100px; text-align: center; line-height: 100px; background-color: #fff; } .btn{position:relative;} .btn:before, .btn:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 5px; width: 50%; top: 80%; max-width: 300px; background: #777; -webkit-box-shadow: 0 15px 10px #777; -moz-box-shadow: 0 15px 10px #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .btn:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } </style></head><body> <div class="btn"> SIGN IN </div></body></html>
七、兼容性
- Chrome 2+
- Firefox 3.5+ (3.0 had partial support)
- Safari 1.3+
- Opera 9.2+
- IE8+ (with some minor bugs
- 几乎所有的移动浏览器
- 唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7
八、注意事项
- 由于伪元素不是真正的元素，所以不会出现在DOM中。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
- 由于伪元素难以维护和调试缓慢，所以不要用伪元素显示内容。
Before和After用法小结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。