css之Content-content内容生成技术

贰、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>