可以使用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. 3.2.1 配置构建Angular应用——简单的笔记存储应用——展示功能

    本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用M ...

  2. pymssql.connect(server='.', user='', password='', database='', timeout=0, login_timeout=60, charset='UTF-8', as_dict=False, host='', appname=None, port='1433', conn_properties, autocommit=False, tds_

    http://pymssql.org/en/stable/ref/pymssql.html """ This is an effort to convert the py ...

  3. 可用内存free不足 hadoop3 无法启动 手动释放缓存 cache

    [root@hadoop3 hadoop]# xlfg total used free shared buff/cache availableMem: 15 0 2 0 12 14Swap: 7 0 ...

  4. linux 多个文件中查找字符串 hadoop 3 安装 调试

    http://www.cnblogs.com/iLoveMyD/p/4281534.html 2015年2月9日 14:36:38 # find <directory> -type f - ...

  5. Eclipse添加Qt插件

    此文件仅为步骤操作作一个记录,以便以后方便查阅. 1.操作大体参考这个网站:http://blog.csdn.net/defonds/article/details/5013412 2.我的运行环境: ...

  6. 《Visual C++ 2010入门教程》系列三:关于C++的一些问题

    <Visual C++ 2010入门教程>系列三:关于C++的一些问题   这一回我自己都不知道应该写点什么好,或许今天的篇幅会比往常短很多.我说过,这不是C++的教程,因为我还没有那个能 ...

  7. mongodb 关闭服务 mongod -f /root/mongodb/bin/xx.conf --shutdown

    /root/mongodb/bin/mongod -f /root/mongodb/bin/xx.conf --shutdown

  8. Java对象与对象引用变量的理解

    Java对象及对象引用 首先定义一个简单的类: class User{ int userId; String userName; } 我们在创建对象时,通常会写: User user = new Us ...

  9. 我使用过的Linux命令之hexdump - ”十六“进制查看器(转载)

    转载:http://codingstandards.iteye.com/blog/805778 本文链接:http://codingstandards.iteye.com/blog/805778   ...

  10. zoj3955:Saddle Point(想法题)

    传送门 题意 给出n*m的矩阵,询问所有子矩阵中鞍点的个数 鞍点定义:在行唯一最小,在列唯一最大 分析 我们遍历每个点,计算该点对于答案的贡献即可. 每个点的贡献为\((2^{numa[i][j]}) ...