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>

运行结果如下:

 

转载于:https://www.cnblogs.com/hzp-blog/p/6374236.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值