【前端开发系列】—— 利用选择器添加内容
【前端开发系列】—— 利用选择器添加内容
用户1154259
发布于 2018-01-18 11:59:19
发布于 2018-01-18 11:59:19
上文讲到了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>实现样例
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2014-09-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录