before、after 插入文字 <元素>:before{ content:“文字”; }
插入图片 <元素>:before{ content:url(1.jpg); }
多个标题前加上连续符号 <元素>:before{ content:counter(计数器); }
在字符串两边嵌套文字符号 open-quote、close-quote
效果图：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>使用选择器在页面中插入内容</title> <style type="text/css"> h1{ counter-reset: subsection; quotes: "[""]"; } h1::before{ content: open-quote; } h1::after{ content: close-quote; } h2::before{ counter-increment: subsection; content: "第"counter(subsection)"句:"; } </style> </head> <body> <h1>静夜思</h1> <h2>床前明月光</h2> <h2>疑是地上霜</h2> <h2>举头望明月</h2> <h2>低头思故乡</h2> <h1>咏鹅</h1> <h2>鹅鹅鹅</h2> <h2>曲项向天歌</h2> <h2>白毛浮绿水</h2> <h2>红掌拨清波</h2> </body> </html>