您的位置：首页 > 其它

使用before和after选择器向页面中插入文字图片编号引号

2017-10-29 18:41 351 查看

使用选择器在页面中插入内容

使用什么选择器？伪元素选择器before和after。

如何插入？使用before或after选择器的content属性。
插入什么内容？文字，图片，项目编号。注意，当插入文字时，需要在文字两旁加上双引号。

<html>
<head>
<meta charset = "UTF-8">
<style type = "text/css">
h1:before
{
content: counter(counter1)".";
}
h1
{
counter-increment:counter1;
counter-reset:counter2;
}
h2:before
{
content: counter(counter2)".";
}
h2
{
counter-increment:counter2;
margin-left:40px;
}
p:before
{
content:"COLUMN";
content:url(1.jpg);
content:"第"counter(my_counter, upper-roman)"句";
content:open-quote;
color:white;
background-color:orange;
padding:1px 5px;
margin-right:10px;
}
p:after
{
content:"COLUMN";
content:url(1.jpg);
content:close-quote;
color:white;
background-color:orange;
padding:1px 5px;
margin-right:10px;
}
p
{
counter-increment:my_counter;
}
p.exception:before
{
content:none;
}
p.exception:after
{
content:normal;
}
</style>
</head>

<body>
<h1>A</h1>
<h2>aaa</h2>
<h2>aaa</h2>
<h2>aaa</h2>
<h1>B</h1>
<h2>bbb</h2>
<h2>bbb</h2>
<h2>bbb</h2>
<h1>C</h1>
<h2>ccc</h2>
<h2>ccc</h2>
<h2>ccc</h2>
<p>黄河远上白云边</p>
<p class = "exception">一片孤云万韧山</p>
<p>羌笛何须怨杨柳</p>
<p>春风不度玉门关</p>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航