贰、content内容生成技术
content属性基本上在::before ::after两个伪元素中
1、辅助元素生成
这里重点不在于content的值，而是为元素本身。我们会把content的值设置成 content:"";
案例1、清除浮动：
.clear:after:{
content:"";
display:table;/*也可以是'block'*/
clear:both;
}
案例2、柱状图
.box{
width:250px;
height:256px;
text-align:justify
}
.box:before{
content:"";
display:inline-block;
height:100%;
}
.box:after{
content:"";
display:inline-block;
width:100%;
}
.bar{
display:inline-block;
width:20px;
}
<div class="box"><i class="bar"></i>
<i class="bar"></i>
<i class="bar"></i>
<i class="bar"></i>
</div>
2、字符内容生成
常见的应用就是配合@font-face规则实现图标字体效果。
:after{
content:"\A";
white-space:pre;
}
\A \D标示的都是换行，“正在加载中...”的页面的时候，常常需要后头的三个点是动态的，也就是“正在加载中.”=>“正在加载中..”=>“正在加载中...”
正在加载中<dot>...</dot>
css为
dot{
display:inline-block;
height:1em;
line-height:1;
text-align:left;
vertical-align:-.25em;
overflow:hidden;
}
dot::before{
display:block;
content:'...\A..\A.';
white-space:pre-wrap;
animation:dot 3s infinite step-start both;
}
@keyframes dot{
33% {transform:translateY(-2em);}
66% {transform:translateY(-1em);}
}
ie8不认识dot所以直接显示其内容：...
ie9不认识animation所以显示第一行内容
3 、content图片生成
直接用url功能显示图片
div:before{
content:url(1.jgp);
}
jpg\ png\ ico\ svg\ bace64url都支持，但是不支持css3渐变背景图
但是实用中更多的是用背景图的方式：
div:before{
content:"";
background:url(1.jpg);
}
4、content attr属性值的内容生成
img:aftrer{
content:attr(alt);
}
.icon:before{
content: attr(data-title);
}
5、content计数器
counter-reset counter-increment 和一个方法counter()/counters()
1>、counter-reset 计数器重置，顺便告诉你从哪里开始计数，默认是0
.xxx{counter-reset:baiwangye 2;}
ie 和firefox不能识别小数，如果不识别的数字，就从0开始计算，chrome从向下取整开始计算
可以多个计数器一起实用
.xxx{counter-reset:baiwangye 2 heiwangye 3;}
2>counter-increment计数器增加
.counter{
counter-reset:baiwangye 2;
counter-increment:baiwangye;
}
.counter:before{
content:counter(baiwangye);/*显示3*/
}
<p class="count">
- 如果要每次增加3的话：
.counter{
counter-increment:baiwangye 3;/*每次增加3*/
}
- 可以同时增加两个counter
.counter{
counter-reset:baiwangye 2 heiwangye 3;
counter-increment:baiwangye heiwangye;
}
- 可以增加负数
.counter{
counter-increment:baiwangye -1;/*每次减一*/
}
- 可以是none或者是inherit
2>counter()这个是方法不是属性
counter(name)
counter(name,style)
style是所有list-style-type显示的东西，可以是disc| circle|square |secimal |low-roma|upper-roma等等，需要的具体查看文档材料。
第二个参数是为了显示的不一定是阿拉伯文字，可能是罗马文等等，这个就是用来显示不同文字的/counters(name，string)用来实现嵌套的
<div class="reset">
<div class="counter">
我是白王爷1
<div class="reset"><div></div></div>
</div>
<div class="counter">我是白王爷2</div>
<div class="counter">我是白王爷3</div>
<div class="counter">
我是白王爷4
<div class="reset">
<div class="counter">我是白王爷4的儿子</div>
<div></div>
</div>
</div>
</div>
以下写法不对
<!--这是有问题的-->
<div class="reset">
<div class="counter">我是白王爷1</div>
<div class="reset">
<div>
<div class="counter">我是白王爷2</div>
<div class="counter">我是白王爷3</div>
<div class="counter">我是白王爷4</div>
<div class="reset">
<div class="counter">我是白王爷4的儿子</div>
<div>
</div>
