码迷,mamicode.com
首页 > Web开发 > 详细

CSS3使用content属性来插入项目编号

时间:2016-09-03 16:17:34      阅读:313      评论:0      收藏:0      [点我收藏+]

标签:

首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在字符串两边加上括号。

1.在多个标题前加上连续编号

<style type="text/css">

 h1:before{

   content:counter(mycounter);  

 }

</style>

 

2.在项目编号中追加文字

h1:before{

  content:‘第‘counter(mycounter)‘章‘;

}

 

3.指定编号的样式

例如:使得编号后面带一个"."文字,编号颜色为蓝色,字体大小为42像素。

h1:before{

   content:counter(mycounter)‘.‘;

   color:blue;

   font-size:42px;

}

 

4.指定编号的种类

h1:before{

  content:counter(mycounter,upper-alpha)‘.‘;

  color:blue;

  font-size:42px;

}

 

5.在字符串两边添加嵌套文字符号

可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。

h1:before{

  content:open-quote;

}

h1:after{

 content:close-quote;

}

h1{

 quotes:"(" ")";

}

CSS3使用content属性来插入项目编号

标签:

原文地址:http://www.cnblogs.com/wyaocn/p/5837043.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!