貳、content內(nèi)容生成技術(shù)
content屬性基本上在::before ::after兩個(gè)偽元素中
1晚缩、輔助元素生成
這里重點(diǎn)不在于content的值溢谤，而是為元素本身。我們會(huì)把content的值設(shè)置成 content:"";
案例1伶唯、清除浮動(dòng)：
.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、字符內(nèi)容生成
常見的應(yīng)用就是配合@font-face規(guī)則實(shí)現(xiàn)圖標(biāo)字體效果乳幸。
:after{
content:"\A";
white-space:pre;
}
\A \D標(biāo)示的都是換行瞪讼，“正在加載中...”的頁(yè)面的時(shí)候，常常需要后頭的三個(gè)點(diǎn)是動(dòng)態(tài)的粹断，也就是“正在加載中.”=>“正在加載中..”=>“正在加載中...”
正在加載中<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不認(rèn)識(shí)dot所以直接顯示其內(nèi)容：...
ie9不認(rèn)識(shí)animation所以顯示第一行內(nèi)容
3 符欠、content圖片生成
直接用url功能顯示圖片
div:before{
content:url(1.jgp);
}
jpg\ png\ ico\ svg\ bace64url都支持，但是不支持css3漸變背景圖
但是實(shí)用中更多的是用背景圖的方式：
div:before{
content:"";
background:url(1.jpg);
}
4姿染、content attr屬性值的內(nèi)容生成
img:aftrer{
content:attr(alt);
}
.icon:before{
content: attr(data-title);
}
5背亥、content計(jì)數(shù)器
counter-reset counter-increment 和一個(gè)方法counter()/counters()
1>、counter-reset 計(jì)數(shù)器重置悬赏，順便告訴你從哪里開始計(jì)數(shù)，默認(rèn)是0
.xxx{counter-reset:baiwangye 2;}
ie 和firefox不能識(shí)別小數(shù)娄徊，如果不識(shí)別的數(shù)字闽颇，就從0開始計(jì)算，chrome從向下取整開始計(jì)算
可以多個(gè)計(jì)數(shù)器一起實(shí)用
.xxx{counter-reset:baiwangye 2 heiwangye 3;}
2>counter-increment計(jì)數(shù)器增加
.counter{
counter-reset:baiwangye 2;
counter-increment:baiwangye;
}
.counter:before{
content:counter(baiwangye);/*顯示3*/
}
<p class="count">
- 如果要每次增加3的話：
.counter{
counter-increment:baiwangye 3;/*每次增加3*/
}
- 可以同時(shí)增加兩個(gè)counter
.counter{
counter-reset:baiwangye 2 heiwangye 3;
counter-increment:baiwangye heiwangye;
}
- 可以增加負(fù)數(shù)
.counter{
counter-increment:baiwangye -1;/*每次減一*/
}
- 可以是none或者是inherit
2>counter()這個(gè)是方法不是屬性
counter(name)
counter(name,style)
style是所有l(wèi)ist-style-type顯示的東西寄锐，可以是disc| circle|square |secimal |low-roma|upper-roma等等兵多，需要的具體查看文檔材料。
第二個(gè)參數(shù)是為了顯示的不一定是阿拉伯文字橄仆，可能是羅馬文等等剩膘，這個(gè)就是用來顯示不同文字的/counters(name，string)用來實(shí)現(xiàn)嵌套的
<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>
以下寫法不對(duì)
<!--這是有問題的-->
<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>
