<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用选择器插入内容</title>
<style>
h2:before{
content:"[插入]";
color:#fff;
background:green;
padding:1px 5px;
margin-right:10px;
}
.two:before{
content:"[插入2]";
color:#fff;
background:red;
padding:1px 5px;
margin-right:10px;
}
</style>
</head>
<body>
<h1>使用选择器插入内容</h1>
<h2 class="two">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2 class="nocontent">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>插入图片文件</title>
<style>
.hot:after{ content:url(images/hot.gif);}
.digest:after{ content:url(images/digest.gif);}
.xinren:after{ content:url(images/xinren.gif);}
</style>
</head>
<body>
<h1>插入图片文件</h1>
<h2 class="hot">插入图片文件</h2>
<h2 class="digest">插入图片文件</h2>
<h2 class="hot">插入图片文件</h2>
<h2 class="hot">插入图片文件</h2>
<h2 class="xinren">插入图片文件</h2>
<h2>插入图片文件</h2>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在多个标题前加上连续编号</title>
<style>
h1:before{
content:counter(n1,upper-roman)‘.‘;
color:green;
font-size:24px;
}
h1{
counter-increment:n1;
}
</style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
<h1>在多个标题前加上连续编号</h1>
<p>测试时在多个标题前加上连续编号</p>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在多个标题前加上连续编号</title>
<style>
h1:before{
content:counter(n1)‘.‘;
color:green;
font-size:24px;
}
h1{
counter-increment:n1;
counter-reset:n2;
}
h2:before{
content:counter(n1)‘-‘counter(n2);
color:#f60;
font-size:18px;
}
h2{
counter-increment:n2;
}
</style>
</head>
<body>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
<h1>在多个标题前加上连续编号</h1>
<h1>在多个标题前加上连续编号</h1>
<h2>编号嵌套、重置编号</h2>
<h2>编号嵌套、重置编号</h2>
</body>
</html>
?效果图：
?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在字符串两边嵌套文字符号</title>
<style>
h1:before{ content:open-quote;}
h1:after{ content:close-quote;}
h1{quotes:"("")";}
</style>
</head>
<body>
<h1>在字符串两边嵌套文字符号</h1>
</body>
</html>
?效果图：
?
?
?
?
原文：http://onestopweb.iteye.com/blog/2262899