首页 > 代码库 > CSS3使用content属性来插入项目编号
CSS3使用content属性来插入项目编号
首先可以使用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属性来插入项目编号
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。