使用选择器在页面中插入内容_前端添加时用的是选择-优快云博客

使用选择器在页面中插入内容

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>