零基础建站培训介绍

当前位置:

使用CSS伪类:before, :after在网页插入内容

:before 伪元素在元素之前添加内容
:before这个伪元素允许创作人员在元素内容的特别前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

:after 伪元素在元素之后添加内容
这个伪元素允许创作人员在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

使用方法:

1、:before, :after在元素前后插入文字

5


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
h2:before{
    content:"Title";//插入的内容;
    color:#FFF;//插入的内容的样式;
    background:#0F0;
    padding:1px;
    margin-right:5px;  
    }
</style>
</head>

<body>
<h2>这是一篇文章的标题</h2>
</body>
</html>
2、:before, :after在元素前后插入图片6

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
h2:before{
    content:url(huo.png);//插入的图片的地址;
    padding:1px;
    margin-right:5px;
    }
</style>
</head>

<body>
<h2>插入图片文件</h2>
</body>
</html>

3、:before在多个标题上添加连续编号
7

在content属性中使用counter属性值来针对多个项目追加连续编号,使用方法如下所示。


<元素>:before{
 content:counter(计数器名);
}

使用计数器来计算编号,计数器可任意命名。

另外,还需要在元素的样式中追加对元素的counter-increment属性的指定,为了使用连续编号,需要将counter-increment属性的属性值设定为before选择器或after选择器的counter属性值中所指定的计数器名。代码如下所示。


<元素>{
 counter-increment:before选择器或after选择器中指定的计数器名
}

接下来,我们在代码清单20-6中看一个对多个项目追加连续编号的示例,在该示例中具有多个标题,使用before选择器对这些标题追加连续编号。

代码清单20-6 对多个项目追加连续编号的示例


<!DOCTYPE html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>对多个项目追加连续编号的示例</title>
</head>
<style type="text/css">
h1:before{
 content: counter(mycounter);
}
h1{
 counter-increment: mycounter;
}
</style>
<body>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
</body>
</html>
4、:before添加连续编号添加文字

8


<!DOCTYPE html ><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对多个项目追加连续编号的示例</title>
</head>
 
<style type="text/css">
h1:before{
 content:'第' counter(mycounter)'节、';
}
h1{
 counter-increment: mycounter;
}
</style>
<body>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
</body>
</html>
5、:before添加连续编号的种类9

<style type="text/css">
h1:before{
 content:counter(计数器,编号种类);
}
h1{
 counter-increment: 计数器;
}
</style>
6、大编号嵌入小编号 10

<style type="text/css">
h1:before{
 content:counter(计数器1);
 counter-reset:计数器2;
}
h1{
 counter-increment: 计数器1;
}
h2:before{
 content:counter(计数器2);
}
h2{
 counter-increment: 计数器2;
}

</style>
7、中编号嵌入大编号11

<style type="text/css">
h1:before{
 content:counter(计数器1);
 counter-reset:计数器2;
}
h1{
 counter-increment: 计数器1;
}
h2:before{
 content:counter(计数器1'-'计数器2);
}
h2{
 counter-increment: 计数器2;
}

</style>
8、在字符串二端放上文字字符 12

<!DOCTYPE html ><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对多个项目追加连续编号的示例</title>
</head>
 
<style type="text/css">
h1:before{
 content:open-quote //开始
}
h1:after{
 content:close-quote //结尾
}
h1{
  quotes:"("")"//类型
}
</style>
<body>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
</body>
</html>
 



						
						                          						
上一课: 下一课:

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 做网站时,避免不了网站上有大量的图片。网站上的图片显示就需要使用img图片标签。HTML img图片标签写法[cce_html]<img src="图片地址" alt=
  • 通常所说的META标签,是在HTML网页源代码中一个重要的html标签。META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、
  • CSS3 text-shadow 属性是CSS3中设置文字阴影的属性,通过这个属性可以设置文字的各个角度的阴影效果。下面介绍一下CSS3 text-shadow 属性的使用方法。
  • HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度和高度呢?(相关
  • CSS中可以给一个DIV设置背景图片,甚至可以设置背景的样式和位置。(相关教程:CSS3视频教程)控制背景图片位置:background-position:水平方向
  • 什么是CSS伪类伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。例如:
  • Part I 这种选择器的共同特征:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用CSS3中共有11种UI元素状态伪类选择器:
  • :before 伪元素在元素之前添加内容:before这个伪元素允许创作人员在元素内容的特别前面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用
  • 如何在网页文字后加水平线?在HTML中,定义水平线可以使用水平线标签HR标签来写一个水平线。基本写法:[cce_html]<hr />[/cce_html]并且
  • 在网页制作和网站开发过程中,网页上使用的字体往往由于浏览者电脑中没有相应的字体,达不到我们设计的效果。为了解决这个问题,我们可以直接使用我们
  • 使用PHP写数据到数据库时,往往一组数据里有很多字段,并且不同的字段是放在不同的数据表里,这时我们插入数据表时,就要将一组数据中的不同字段同时
  • 做网站时,我们经常需要使用PHP给MYSQL插入新数据或者将MYSQL数据库里的数据进行更新。这都需要使用MYSQL语句。这一节学做网站论坛介绍一下PHP给MYSQL
  • dedecms内容页标签介绍 (13000 次浏览)
    课程要点1.内容页标签介绍2.系统基本参数调用1.内容页标签介绍2.系统基本参数调用调用方式{dede:global.cfg_description/}常用标签站点
  • ks001 快速建站第五步:后台发布内容通过后台发布自己网站文章和产品