插入文字：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用选择器在页面插入内容</title> <style> h2:before{ content: "before增加title"; color: #ffffff; background: #ff6600; padding: 1px 5px; margin-right: 10px; } h2:after{ content: "after增加title"; color: #ffffff; background: #ff6600; padding: 1px 5px; margin-left: 10px; }/* 排除不需要插入内容的元素*/ h2.nocontent:before{ content: none; } </style> </head> <body> <h1>使用选择器在页面插入内容</h1> <h2>使用选择器在页面插入内容</h2> <h2 class="nocontent">使用选择器在页面插入内容</h2> <h2>使用选择器在页面插入内容</h2> </body> </html>
插入图片：
插入项目编号：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用选择器在页面插入内容</title> <style> h1:before{ content: counter(hajsq)'.'; color: green; } h1{ counter-increment: hajsq; /*h1的子元素 <p>都从头开始编号*/ counter-reset: hbjsq; } p:before{ /*中编号嵌入大编号*/ content:counter(hajsq) '-'counter(hbjsq); } p{ counter-increment: hbjsq; } </style> </head> <body> <h1>使用选择器在多个标题前插入连续编号</h1> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <h1>使用选择器在多个标题前插入连续编号</h1> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <h1>使用选择器在多个标题前插入连续编号</h1> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> <p>编号嵌套、重置编号</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <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> <p>编号嵌套、重置编号</p> </body> </html>