首页 > 代码库 > 【前端开发系列】—— 利用选择器添加内容
【前端开发系列】—— 利用选择器添加内容
上文讲到了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>
实现样例
【前端开发系列】—— 利用选择器添加内容
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。