css3中content属性的应用
可以使用css3中content功能为html元素增减内容。content需要配合 E:before和E:after使用。
废话少说,看代码和效果说明:
第一种:
css代码:
#div1:before {
content: "你使用的浏览器属性太低。";
}
html代码:
<div id="div1">div</div>
显示效果:

第二种:
css代码:
#div1:after {
content:"我使用的浏览器版本不低呀。";
}
html代码:
<div id="div1">div</div>
浏览器中显示效果:

第三种:
css代码:
#div2 p:before{
content:'第'counter(count)'章:';
}
#div2 p{
counter-increment:count;
}
html代码:
<div id="div2">
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
<p>生活是很美好的。</p>
</div>
浏览器显示效果:

查看源代码:

css3中content属性的应用的更多相关文章
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- 初识 css3中counter属性
最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- css3 的content 属性
content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...
- CSS3使用content属性来插入项目编号
首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...
- CSS3中border-image属性详解
border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...
- CSS中content属性的妙用
前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...
- css3中transition属性详解
css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...
随机推荐
- 说说Windows7 64bits下安装TensorFlow GPU版本会遇到的一些坑
不多说,直接上干货! 再写博文,回顾在Windows7上安装TensorFlow-GPU的一路坑 Windows7上安装TensorFlow的GPU版本后记 欢迎大家,加入我的微信公众号:大数据躺过的 ...
- Cts框架解析(6)-任务的运行
前两篇讲了任务的加入和9大项配置,这篇讲任务的运行. 任务的运行 任务的运行在CommandScheduler的run方法中,所以删除全部的断点,在run方法中打上断点,重新启动启动debug: 先看 ...
- 5 微信票据 access_token--开发微信的第二道坎儿
一 access_token基本概念 定义:access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存. 时效性:access_ ...
- python 【第二篇】python基本数据类型
python数据类型 python的数据类型和大多数编程语言一样,有int,float,long,string但是python有三个特殊的数据类型:列表,元组,字典 如果不知道你的数据类型有什么方法: ...
- [IT学习]Greatwall
1.evilcos 优雅 过城墙 如果没这个开源的关键解决方案怎么办呢?我给你一个永恒思路,技术贴请看: http://www.ibm.com/developerworks/cn/linux/l-cn ...
- [办公应用]如何在WORD中让英文网址可以在字符中间换行
有时候我们写文章,存在中英文混合录入的情况.一般情况下,office 2003的word软件中,会自作聪明的避免单词断行显示,也就是说它会默认尽量把一个单词显示在某一行内,从而避免单词被分开.但有时候 ...
- hexSHA1散列加密解密(不可逆)
1.maven引入codec和commons依赖: <dependency> <groupId>commons-codec</groupId> <artifa ...
- 设计模式-(12)迭代器模式 (swift版)
一,概念 迭代器模式(Iterator Pattern)是 Java 和 .Net 编程环境中非常常用的设计模式.这种模式用于顺序访问集合对象的元素,不需要知道集合对象的底层表示.迭代器模式属于行为型 ...
- BZOJ 1305:dance跳舞(二分+最大流)
一次舞会有n个男孩和n个女孩.每首曲子开始时,所有男孩和女孩恰好配成n对跳交谊舞.每个男孩都不会和同一个女孩跳两首(或更多)舞曲.有一些男孩女孩相互喜欢,而其他相互不喜欢(不会“单向喜欢”).每个男孩 ...
- React VSCode插件
可以安装2个插件,一个是 Atuo Rename Tag 一个 Auto Close Tag 这样就好都了