<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用选择器插入内容</title> <style> h2:before{ content:"[插入]"; color:#fff; background:green; padding:1px 5px; margin-right:10px; } .two:before{ content:"[插入2]"; color:#fff; background:red; padding:1px 5px; margin-right:10px; } </style> </head> <body> <h1>使用选择器插入内容</h1> <h2 class="two">使用选择器插入内容</h2> <h2>使用选择器插入内容</h2> <h2 class="nocontent">使用选择器插入内容</h2> <h2>使用选择器插入内容</h2> <h2>使用选择器插入内容</h2> </body> </html>
效果图:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>插入图片文件</title> <style> .hot:after{ content:url(images/hot.gif);} .digest:after{ content:url(images/digest.gif);} .xinren:after{ content:url(images/xinren.gif);} </style> </head> <body> <h1>插入图片文件</h1> <h2 class="hot">插入图片文件</h2> <h2 class="digest">插入图片文件</h2> <h2 class="hot">插入图片文件</h2> <h2 class="hot">插入图片文件</h2> <h2 class="xinren">插入图片文件</h2> <h2>插入图片文件</h2> </body> </html>
效果图:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>在多个标题前加上连续编号</title> <style> h1:before{ content:counter(n1,upper-roman)'.'; color:green; font-size:24px; } h1{ counter-increment:n1; } </style> </head> <body> <h1>在多个标题前加上连续编号</h1> <p>测试时在多个标题前加上连续编号</p> <h1>在多个标题前加上连续编号</h1> <p>测试时在多个标题前加上连续编号</p> <h1>在多个标题前加上连续编号</h1> <p>测试时在多个标题前加上连续编号</p> <h1>在多个标题前加上连续编号</h1> <p>测试时在多个标题前加上连续编号</p> </body> </html>
效果图:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>在多个标题前加上连续编号</title> <style> h1:before{ content:counter(n1)'.'; color:green; font-size:24px; } h1{ counter-increment:n1; counter-reset:n2; } h2:before{ content:counter(n1)'-'counter(n2); color:#f60; font-size:18px; } h2{ counter-increment:n2; } </style> </head> <body> <h1>在多个标题前加上连续编号</h1> <h2>编号嵌套、重置编号</h2> <h2>编号嵌套、重置编号</h2> <h2>编号嵌套、重置编号</h2> <h2>编号嵌套、重置编号</h2> <h1>在多个标题前加上连续编号</h1> <h1>在多个标题前加上连续编号</h1> <h2>编号嵌套、重置编号</h2> <h2>编号嵌套、重置编号</h2> </body> </html>
效果图:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>在字符串两边嵌套文字符号</title> <style> h1:before{ content:open-quote;} h1:after{ content:close-quote;} h1{quotes:"("")";} </style> </head> <body> <h1>在字符串两边嵌套文字符号</h1> </body> </html>
效果图: