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 ...
随机推荐
- HDU 5274 Dylans loves tree 树链剖分+线段树
Dylans loves tree Problem Description Dylans is given a tree with N nodes. All nodes have a value A[ ...
- 理解static关键字
1.static 变量是类变量,通过类名引用. 2.static 方法不需要针对某个对象进行操作,其运行结果仅仅与输入的参数有关,调用时直接类名引用. 3.static 方法不能对非静态成员进行访问. ...
- make的特殊之处
1 规则的先后顺序问题 规则的先后顺序只会影响默认的目标,没有其它的影响. 2 make对具有相同目标的规则的处理方式 2.1 如果是单冒号 只能有一个规则是有命令的,然后对它们进行合并,即依赖合并. ...
- mongodb10---分片
分片:数据非常大,把不同段的数据拆了,1-1000000放在节点1,1000000-2000000放在节点2,200000-300000放在节点上.把不同的数据放在不同的服务器叫shard分片. 请求 ...
- HDU1083 Courses —— 二分图最大匹配
题目链接:https://vjudge.net/problem/HDU-1083 Courses Time Limit: 20000/10000 MS (Java/Others) Memory ...
- 关于intent传递对象后是传递的对象的地址还是对象的拷贝?
var intent = Intent(activity,SingleColorControlActivity::class.java); var bundle = Bundle()// bundle ...
- leetcode 戳气球
有 n 个气球,编号为0 到 n-1,每个气球上都标有一个数字,这些数字存在数组 nums 中. 现在要求你戳破所有的气球.每当你戳破一个气球 i 时,你可以获得 nums[left] * nums[ ...
- Vue.js:安装node js到构建一个vue并启动它
ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...
- Logistic回归 线性回归(转)
来源: http://www.cnblogs.com/jerrylead 1 摘要 本报告是在学习斯坦福大学机器学习课程前四节加上配套的讲义后的总结与认识.前四节主要讲述了回归问题,回归属于有监督学习 ...
- json 获取属性值
ajax后台获取json数据 前台赋值.由于值太多 一个个写 val会类似的.因为直接字段值和 前台的标签id相同,这样只要循环结果集json赋值即可. 这里需要用到json的字段值 var data ...