content 属性、计数器
content 属性
content 属性，应用于 before 和 after 伪元素。
content:normal;(默认) content:<string> | <uri> | attr(<identifier>)
- string 里面的内容会原样显示，即使包含某种标记也不例外
// 如果希望生成内容中有一个换行，则需要使用\A // 若是一个很长的串，需要它拆分成多行则需要用\对换行符转义 div:before{ content: "第一段\ 第二段"; } div:after{ content:"\A后缀"; }
- <uri>
div:before{ content: url("arrow.gif"); }
- attr(<identifier>)
div:before{ content: attr(data-before); } <补充>[ quotes属性 ] 管理引号 前单引号 -> \2018 后单引号 -> \2018 前双引号 -> \201C 后双引号 -> \201D quotes:'201C' '201D' '2018' '2019'; // 第一个值定义最外层开始引号(open-quote) // 第二个串定义最外层结束引号(close-quote) // 第三个值定义次外层开始引号 // 第四个值定义次外层结束引号 // 第五个值定义次次外层开始引号 // 第六个值定义次次外层结束引号……
- open-quote | close-quote
<style> div{ display: inline-block; quotes: '201C' '201D' '2018' '2019' '201C' '201D'; } div:before{ content: open-quote; } div:after{ content: no-close-quote; } </style> <div> 最外层<div> 次外层 <div> 最里层 </div> </div> </div>
- counter（见计数器）
[ 应用 ]
1. 首字下沉
<style>
div{
width: 200px;
border: 1px solid black;
text-indent: 0.5em;
}
div:first-letter{
font-size: 30px;
float: left;
}
</style>
2. 钉子效果
<style> /*使用before伪元素画圆*/
.box:before{
display:block;
content:"钉子";
height: 50px;
width: 50px;
border-radius: 50%;
background-color: black;
color: white;
font-weight:bold;
text-align: center;
line-height: 50px;
}
/*使用after伪元素画三角*/
.box:after{
display: block;
content: "";
width: 0;
height: 0;
border: 25px solid transparent;
border-top: 50px solid black;
margin-top: -20px;
}
</style>
<div class="box"></div>
3. 图片叠加效果
<style>
body{
margin: 0;
}
.box{
position:relative;
margin: 30px auto 0;
width: 300px;
}
.box-img{
position: absolute;
z-index:1;
border: 5px solid gray;
}
.box:before,.box:after{
content:"";
position: absolute;
background-color: #D5B07C;
width: 300px;
height: 200px;
border: 5px solid gray;
}
.box:before{
left: -10px;
top: 0;
transform: rotate(-5deg);
}
.box:after{
top: 4px;
left: 0;
transform: rotate(4deg);
}
</style>
<div class="box">
<img class="box-img" src="diejia.jpg" alt="图片叠加效果">
</div>
计数器
对于计数器，也许并不算陌生。有序列表中的列表项标志就是计数器。
[1] 创建计数器
创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量。
counter-reset counter-reset:none;(默认) counter-reset:<identifier><integer> //<identifier>是计数器标识符，是创作人员自己起的一个名字 //<integer>是重置的数字 counter-reset: c1 4;//表示将c1的计数器重置为4 counter-reset: c1 4 c2 0 c3 -5;//表示将c1重置为4,将c2重置为0,将c3重置为-5 couter-reset: c1;//将c1重置为0 // 如果不设置，则默认重置为0 counter-increment counter-increment:none;(默认) counter-increment:<identifier><integer> //<identifier>是计数器标识符，是创作人员自己起的一个名字 //<integer>是递增的数字 counter-increment: c1 4;//表示将c1计数器的递增设为4 counter-reset: c1 4 c2 0 c3 -5;//表示将c1递增设为4,将c2递增设为0,将c3递增设为-5 couter-increment: c1;//将c1计数器的递增设为1 // 如果不设置<integer>，则默认递增为1
[2] 使用计数器
具体使用计数器需结合 content 属性和 counter() 函数；counter() 函数接受两个参数，而且两参数之间用逗号（,）分隔。
第一个参数是计数器标识符，第二个参数设置计数器风格（可省略），与列表中 list-style-type 值相同。
同样的，可以使用多个 counter() 函数。
content: counter(c1,upper-roman); //表示使用大写罗马字母格式的计数器 c1
DEMO：层级目录演示
<div id="oShow">
<h2>第一章</h2>
<h3>第一部分</h3>
<p>第一节</p>
<p>第二节</p>
<h3>第二部分</h3>
<p>第一节</p>
<h2>第二章</h2>
<h3>第一部分</h3>
<p>第一节</p>
<p>第二节</p>
<h3>第二部分</h3>
<p>第一节</p>
<h2>第三章</h2>
<h3>第一部分</h3>
<p>第一节</p>
<p>第二节</p>
<h3>第二部分</h3>
<p>第一节</p>
</div>
body,h2,h3,p{
margin: 0;
}
#oShow{
counter-reset: c2;
}
#oShow h2{
counter-reset: c3 cp;
counter-increment: c2;
}
#oShow h3{
counter-increment: c3;
counter-reset: cp;
text-indent: 2em;
}
#oShow p{
counter-increment: cp;
text-indent: 4em;
}
#oShow h2:before{
content: counter(c2);
}
#oShow h3:before{
content: counter(c2) '.' counter(c3);
}
#oShow p:before{
content: counter(c2) '.' counter(c3) '.' counter(cp);
}