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 ...
随机推荐
- int&boolean——Java和C的一点小差别
Java和C的差别非常多.只是预计这一点非常多人都不知道. 今天面试时碰到这么道C语言题 求执行结果 int x = -1; while(!x!=0){ cout<<x<<en ...
- 大话设计模式C++实现-第14章-观察者模式
一.UML图 关键词:Subject维护一个Observer列表.Subject运行Notify()时就运行列表中的每一个Observer的Update(). 二.概念 观察者模式:定义了一种一对多的 ...
- 注入式开发(二):.NET 匿名函数
其实匿名函数就是个委托.只不过写起来更简洁. 为啥要用匿名函数呢?只是为了装逼吗? 诺诺诺 比如说,我们写代码,写着写着,发现有2个函数非常相像: string methodA(string data ...
- 【bzoj2809】[Apio2012]dispatching (左偏树)
我们需要枚举根,然后从其子树内选尽量多的点,薪水不超过M,可是暴力复杂度不对.于是考虑自下而上合并树(开始每棵树内只有一个节点,就是自己) 每个树是一个堆,我们维护树的节点个数和薪水总和,合并时,不断 ...
- net start sshd 发生系统错误1069--cygwin安装过程
net start sshd 发生系统错误1069 解决方法: services.msc调出服务,然后CYGWIN sshd服务->属性,修改账户的名字和密码(win7的登录名和密码) 可能还遇 ...
- SVN服务器端的使用
SVN服务器端的使用 1.下载VirtualSVN Server,安装好后打开,右键Repository->新建->Repository创意一个版本库.默认点击下一步,输入要创建版本库的名 ...
- cocos2d-x 打包成so文件之后,假设出现错误,能够使用ndk-stack来查看里面的异常
cocos2d-x 打包成so文件之后,假设出现错误,能够使用ndk-stack来查看里面的异常 详细方法.自行百度.
- 暴走吧!Snapdragon SDK开发速成指南
(文/Aurora J) Qualcomm的Snapdragon处理器.它快如闪电.效率极高.擅长挑战多任务极限,而且拥有攻城狮们梦寐以求的无限潜能.它能确保您的手机集4G LTE.极速体验.长久续航 ...
- SE11 数据表中 日志数据更改 勾选的作用
[园工]HF-abap-Rainy(574570549) 11:10:12这个有啥作用,勾上了怎么查修改日志呢,[园丁]SH-CRM-ALEX(8738890) 11:13:53SCU3[ ...
- 替换Android自带apk【转】
本文转载自:http://www.voidcn.com/article/p-gonowdjh-vz.html 安卓自带的app放在/system/app/下,当我们想要替换这些应用时可以参考如下步骤: ...