1、使用选择器插入文字内容
在CSS3中,使用before选择器在元素前面插入内容,使用after在元素后面插入内容,在选择器content属性中定义要插入的内容。
例如对H2使用before选择器在H2的前面插入文字“Title”等。
<style type="text/css">
}
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径,比如在标题前插入一张图片!
如:
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
例如:
在CSS3中,使用before选择器在元素前面插入内容,使用after在元素后面插入内容,在选择器content属性中定义要插入的内容。
例如对H2使用before选择器在H2的前面插入文字“Title”等。
<style type="text/css">
h2:before
{
content:"Title";}
</style>
还可以使用content属性追加一个none属性值来排除一些不需要插入内容的元素。
如:
<style type="text/css">
h2.nocontent:before{
content:none;
}
</style>
例如:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用选择器插入内容</title>
<style>
h2:before{
content: "Title";
color:#fff;
background: green;
padding: 1px 5px;
margin-right: 10px;
}
h2.nocontent:before{
content: none;
}
</style>
</head>
<body>
<h1>使用选择器插入内容</h1>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2 class="nocontent">使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
<h2>使用选择器插入内容</h2>
</body>
</html>
2、使用选择器插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。
在插入图片是需要使用URL指定图片的路径,比如在标题前插入一张图片!
如:
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
例如:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>插入图片</title>
<style>
/*h2:after{*/
/*content: url(hot.gif);*/
/*}*/
h2.hot:after{
content: url(hot.gif);
}
h2.digest:after{
content: url(digest.gif);
}
h2.xinren:after{
content: url(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 class="hot">这是最近很火的帖子</h2>
<h2>插入图片文件</h2>
</body>
</html>
效果;
3、使用选择器插入项目编号
可以在多个标题前加上连续编号、在标题/项目编号中追加文字等等。
还可以使用content属性的open-quote属性值与close-quote属性值在字符串的两边添加诸如小括号、单引号、双引号之类的文字字符。如
<style>
h1:before{
content:open-quote; 这里open-quote是开始符号
}
h1:after{
content:close-quote; 这里close-quote是结束符号
}
h1{
quote:"(" ")"; 这里quote字符类型(使用双引号("")的时候需要使用转义字符“\”)
}
</style>
<h1>标题</h1>