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 ...
随机推荐
- make的特殊之处
1 规则的先后顺序问题 规则的先后顺序只会影响默认的目标,没有其它的影响. 2 make对具有相同目标的规则的处理方式 2.1 如果是单冒号 只能有一个规则是有命令的,然后对它们进行合并,即依赖合并. ...
- POJ3159 Candies —— 差分约束 spfa
题目链接:http://poj.org/problem?id=3159 Candies Time Limit: 1500MS Memory Limit: 131072K Total Submiss ...
- Watir: element_by_xpath 的使用
b =Watir::IE.new b.goto'http://www.google.com/' txt =b.element_by_xpath("//*[@name='q']") ...
- FLASH OTP
OTP 软件加密运用参考 为了防止软件被他人盗用,spansion flash给每个芯片植入了代表身份的unique ID,增加了OTP扇区,目前我们可以运用这两个特性,来实现软件的加密保护.软件加密 ...
- 《JAVA与模式》之解释器模式
解释器模式是类的行为模式.给定一个语言之后,解释器模式可以定义出其文法的一种表示,并同时提供一个解释器.客户端可以使用这个解释器来解释这个语言中的句子. 解释器模式的结构 下面就以一个示意性的系统为例 ...
- HDU 5512 Pagodas (数论)
题意:给了初始的集合{a, b},然后取集合里的两个元素进行加或者减的操作,生成新的元素.问最后最多能生成多少个元素.问答案的奇偶性. 析:多先写几个你就会发现,答案就是 n / gcd(a, b). ...
- E201700525-hm
skeleton n. 骨骼; (建筑物等的) 骨架; 梗概; 骨瘦如柴的人(或动物);adj. 骨骼的; 骨瘦如柴的; 概略的; 基本的; cloud n. 云; 云状物; invoke ...
- 我理解的 js 异步成长总结
本文是自己的理解,如果有错误的地方,还请各路大神指出 首先说下我最常用的 Promise getHandlePickupQrPromise() { // 定义返回 Promise对象 // Promi ...
- 【牛客-14602】xinjun与阴阳师(01背包)
xinjun与阴阳师 题目描述 xinjun是各类手游的狂热粉丝,因随手一氪.一氪上千而威震工大,现在他迷上了阴阳师.xinjun玩手游有一个习惯,就是经过层层计算制定出一套方案来使操作利益最大化(因 ...
- 原生JavaScript实战之搜索框筛选功能
成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> < ...