【前端开发系列】—— 利用选择器添加内容

时间:2022-04-22
本文章向大家介绍【前端开发系列】—— 利用选择器添加内容，主要内容包括代码样例、实现样例、基本概念、基础应用、原理机制和需要注意的事项等，并结合实例形式分析了其使用技巧，希望通过本文能帮助到大家理解应用这部分内容。

　　上文讲到了CSS3的选择器，通过after和before选择器，在元素前后添加内容。

　　也可以通过变量来实现自定义的标题

1 　　　　h1:before{
2             content:'第'counter(mycounter)'章';
3             color:red;
4             font-size:30px;
5         }
6         h1{
7             counter-increment:mycounter;
8         }

代码样例

<html>
<head>
    <style type="text/css">
        h1:before{
            content:'第'counter(mycounter)'章';
            color:red;
            font-size:30px;
        }
        h1{
            counter-increment:mycounter;
        }
        p:before{
            content:open-quote;
        }
        p:after{
            content:close-quote;
        }
        p{
            quotes:"("")";
        }
    </style>
</head>
<body>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
<h1>大标题</h1>
<p>示例文字</p>
</body>
</html>

实现样例

随机文章
本站知识点必读
最近更新