css：伪类before，after的用法

1.添加文字，图片

1     h1: before{
2       content: “text”    /*添加文字*/  
3 　　}  
4 
5     h2: before{
6       content: url(1.jpg)    /*添加图像*/
7 　　}

2.插入符号,如括号“（）”

1      h1{
2         quotes: "("")";
3     }
4     h1:before{
5         content: open-quote;
6     }
7     h1:after{
8         content: close-quote;
9     }

3.标题嵌套

 1 <style type="text/css">
 2     h1{
 3         counter-increment: title;
 4         counter-reset: subtitle;
 5     }
 6     h1:before{
 7         content: counter(title);
 8     }
 9     h2{
10         counter-increment: subtitle;
11     }
12     h2:before{
13         content: counter(title)"-"counter(subtitle)".";
14         margin-left: 20px;
15     }
16 </style>
17 </head>
18 <body>
19     <h1>大标题</h1>
20     <h2>小标题</h2>
21     <h2>小标题</h2>
22     <h2>小标题</h2>
23     <h1>大标题</h1>
24     <h2>小标题</h2>
25     <h2>小标题</h2>
26     <h2>小标题</h2>
27 </body>

运行结果如下：

posted on 2017-02-07 15:13 飞翔吧菜鸟23 阅读(162) 评论(0) 编辑收藏举报