可以使用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属性的应用的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  3. 初识 css3中counter属性

    最近看到counter属性,好奇是做什么用的,于是去查了查. 1.简单介绍 counter是为css中插入计数器.[注明]在CSS2.1中counter()只能被使用在content属性上.关于浏览器 ...

  4. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  5. css3 的content 属性

    content属性想必大家都熟悉了,一般结合伪类一起使用,表示显示的内容 例如:.box:before{content:"hello";width:100px;line-heigh ...

  6. CSS3使用content属性来插入项目编号

    首先可以使用before选择器与after选择器的content属性在元素的前面或者后面插入文字和图像,这里我记录的是利用这个content属性来在项目前插入项目编号,同时可以利用content属性在 ...

  7. CSS3中border-image属性详解

    border-images可以说也是CSS3中的重量级属性,如同圆角.边框颜色属性border-color.块阴影属性一样,也是属于边框属性中的一员. 从其字面意思上看,我们可以理解为“边框-图片”, ...

  8. CSS中content属性的妙用

    前言 本文讲解CSS中使用频率并不高的content属性,通过多个实用的案例,带你由浅入深的掌握content的用法,让代码变得更加简洁.高效. 定义 W3school中这样定义: content 属 ...

  9. css3中transition属性详解

    css3中通过transition属性可以实现一些简单的动画过渡效果~ 1.语法 transition: property duration timing-function delay; transi ...

随机推荐

  1. int&amp;boolean——Java和C的一点小差别

    Java和C的差别非常多.只是预计这一点非常多人都不知道. 今天面试时碰到这么道C语言题 求执行结果 int x = -1; while(!x!=0){ cout<<x<<en ...

  2. 大话设计模式C++实现-第14章-观察者模式

    一.UML图 关键词:Subject维护一个Observer列表.Subject运行Notify()时就运行列表中的每一个Observer的Update(). 二.概念 观察者模式:定义了一种一对多的 ...

  3. 注入式开发(二):.NET 匿名函数

    其实匿名函数就是个委托.只不过写起来更简洁. 为啥要用匿名函数呢?只是为了装逼吗? 诺诺诺 比如说,我们写代码,写着写着,发现有2个函数非常相像: string methodA(string data ...

  4. 【bzoj2809】[Apio2012]dispatching (左偏树)

    我们需要枚举根,然后从其子树内选尽量多的点,薪水不超过M,可是暴力复杂度不对.于是考虑自下而上合并树(开始每棵树内只有一个节点,就是自己) 每个树是一个堆,我们维护树的节点个数和薪水总和,合并时,不断 ...

  5. net start sshd 发生系统错误1069--cygwin安装过程

    net start sshd 发生系统错误1069 解决方法: services.msc调出服务,然后CYGWIN sshd服务->属性,修改账户的名字和密码(win7的登录名和密码) 可能还遇 ...

  6. SVN服务器端的使用

    SVN服务器端的使用 1.下载VirtualSVN Server,安装好后打开,右键Repository->新建->Repository创意一个版本库.默认点击下一步,输入要创建版本库的名 ...

  7. cocos2d-x 打包成so文件之后,假设出现错误,能够使用ndk-stack来查看里面的异常

    cocos2d-x  打包成so文件之后,假设出现错误,能够使用ndk-stack来查看里面的异常 详细方法.自行百度.

  8. 暴走吧!Snapdragon SDK开发速成指南

    (文/Aurora J) Qualcomm的Snapdragon处理器.它快如闪电.效率极高.擅长挑战多任务极限,而且拥有攻城狮们梦寐以求的无限潜能.它能确保您的手机集4G LTE.极速体验.长久续航 ...

  9. SE11 数据表中 日志数据更改 勾选的作用

        [园工]HF-abap-Rainy(574570549)  11:10:12这个有啥作用,勾上了怎么查修改日志呢,[园丁]SH-CRM-ALEX(8738890)  11:13:53SCU3[ ...

  10. 替换Android自带apk【转】

    本文转载自:http://www.voidcn.com/article/p-gonowdjh-vz.html 安卓自带的app放在/system/app/下,当我们想要替换这些应用时可以参考如下步骤: ...