Before和After用法小结
Before和After用法小结
一、特性：不能左右: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="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="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="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="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="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="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用法小结的更多相关文章
- 转载：Hadoop排序工具用法小结
本文转载自Silhouette的文章,原文地址:http://www.dreamingfish123.info/?p=1102 Hadoop排序工具用法小结 发表于 2014 年 8 月 25 日 由 ...
- [No000010]Ruby 中一些百分号（%）的用法小结
#Ruby 中一些百分号(%)的用法小结 #这篇文章主要介绍了Ruby 中一些百分号(%)的用法小结,需要的朋友可以参考下 what_frank_said = "Hello!"#% ...
- C++ typedef用法小结 （※不能不看※）
C++ typedef用法小结 (※不能不看※) 第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // 这多数不 ...
- 函数fgets和fputs、fread和fwrite、fscanf和fprintf用法小结 （转）
函数fgets和fputs.fread和fwrite.fscanf和fprintf用法小结 字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符 ...
- 1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结 第二篇文章:@media用法 第一篇文章:@用法小结 这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
- 英语语法最终珍藏版笔记- 21it 用法小结
it 用法小结 it 在英语中的意思较多,用法较广,现总结如下. 一.it作句子的真正主语 1．it 指前面已经提到过的人或事物,有时指心目中的或成为问题的人或事物,作真正主语. 例如: What’s ...
- ［转］ssh常用用法小结
ssh常用用法小结 1.连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以上两种方式都可以远程登录到远程主机, ...
- 结构体定义 typedef struct 用法详解和用法小结
typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,stru ...
- typedef用法小结
typedef用法小结- - 注意:本文转自网络,版权归原作者所有. typedef typedef用法小结- - 这两天在看程序的时候,发现很多地方都用到typedef,在结构体定义,还有一些数组等 ...
- NSEnumerator用法小结
NSEnumerator 3)枚举 (NSEnumerator)遍历数组每个索引处的对象,你可以编写一个0到[array count]的循环,而NSEnumerator用来描述这种集合迭代运算的方 ...
随机推荐
- clientIDMode的应用
以前我们可以通过ClientID在JavaScript脚本中服务器端控件.比如: document.getElementById("<%=控件.ClientID %>" ...
- jquery 判断当前上传文件大小限制上传格式 搭配thinkphp实现上传即预览（模拟异步上传）
在web开发中,最纠结的一项就是文件上传,最近由于项目需要前后摸索了四天在这里分享给大家.如有不足,望指出!! 前台:jquery.easyui.html 后台:thinkphp 主要涉及语言:jqu ...
- ASP.NET5
ASP.NET5 2015年11月30日, ASP.NET 5 RC1 已经发布,本文尝试了一下ASP.NET5项目的创见一发布到IIS.开发环境,win10 64位,visual studio201 ...
- DataGridView绑定数据源
给DataGridView绑定数据源比較简单,方法主要有两种: 1.直接在控件属性中绑定数据源,这样的方法最简单,但它是直接连接数据库的,这样就和传DataTable的后果差点儿相同了,所以还是尽量避 ...
- 【YouVersion】 The Bible 圣经App
[YouVersion] The Bible 圣经 App 今天向大家郑重推荐一款非常棒的圣经App : <The Bible> YouVersion 团队开发的全球下载量和安装数目第 ...
- TCP/IP 网络精讲：开宗明义及第一课
内容简介 1.课程大纲 2.第一部分第一课:互联网历史 3.第一部分第二课预告:互联网的创立,OSI七层模型 课程大纲 我们将带大家一起来学习很多网络方面的技能,向大家介绍TCP/IP的基础知识点.你 ...
- Linux-2.6.32内核编译流量计数器nfacct
最近一直想看到一本书<一个Jiegeng华>.而技术不依赖书.但是,这并不表示我IT技术没有兴趣.事实证明,,当我无法理解的沧桑.肮脏的领导者无法理解的心理.自我可惜无法理解它处处感受到脏 ...
- android 更新实现自己主动
其主要原理是: 在应用程序启动.取server在版本 , 以下这个是获取当前应用的版本号信息 private void getCurVersion() { try { PackageInfo pInf ...
- poj3281-Dining ，最大流量，内置图
id=3281">点击打开链接 分析: 求最大流 建图: 拆点 牛拆成左边与食物相连的左牛 和 右边与饮料相连的右牛 1.s->食物 连边 2.食物->左牛 3.左牛-&g ...
- T-SQL问题解决集锦——数据加解密（2）
原文:T-SQL问题解决集锦--数据加解密(2) 问题三.如何让指定用户可以对数据表进行Truncate操作? Truncate在对大表全删除操作时,会明显比Delete语句更快更有效,但是因为它不需 ...