可以使用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. 【CSS3动画实战】Mailman Icon

    周末闲来无事,就想着做点东西练练手.又苦于自己 PS 水平太差,设计不出什么好看的东西. 干脆就在 Dribbble 上逛一逛,看看有什么看起来比较屌的,实际上却很简单的东西. 一共做了 3 个,均已 ...

  2. mysql 中 unix_timestamp和from_unixtime 时间戳函数

    1.unix_timestamp 将时间转化为时间戳.(date 类型数据转换成 timestamp 形式整数) 没传时间参数则取当前时间的时间戳 mysql> select unix_time ...

  3. 2016/3/13 MySQL 增删查改 CRUD 用代码实现

    用代码实现数据库数据输入 T-SQL语句 查询语句分几块 ①创建表 create table Car (Code varchar(50) primary key, #primary key 主键 定义 ...

  4. TF-IDF(term frequency–inverse document frequency)

    TF-IDF是一种统计方法,用以评估一字词对于一个文件集或一个语料库中的其中一份文件的重要程度. 字词的重要性随着它在文件中出现的次数成正比增加,但同时会随着它在语料库中出现的频率成反比下降. TF- ...

  5. C#生成Excel文件后彻底解除占用代码(来着CSDN)

    http://bbs.csdn.net/topics/280078428 jy251 LS说KILL进程的朋友们···我说...你们真行!!!如果用户是administrator还行,如果不是怎么办? ...

  6. mysql--DML--视图,索引,事务,字符集,函数

    Mysql中,表/列可以改名,database不能改名. phpMyAdmin似乎有这功能? 他是建新库,把所有表复制到新库,再删旧库完成的. 删除一个数据库: drop database 数据库名; ...

  7. 什么是PMU(PMIC)【转】

    本文转载自:http://blog.csdn.net/zhenwenxian/article/details/7614537 什么是PMU(PMIC) PMU(power management uni ...

  8. JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回 out.print(ja);

    JSONArray ja = JSONArray.fromObject(list);//特殊类 用于将list转化为JSON 数据并返回out.print(ja);

  9. 并不对劲的bzoj1861: [Zjoi2006]Book 书架

    传送门-> 这题的正确做法是splay维护这摞书. 但是并不对劲的人选择了暴力(皮这一下很开心). #include<algorithm> #include<cmath> ...

  10. 性能测试工具curl-loader(linux)

    curl-loader介绍 curl-loader(也被称为“omes-NIK”和“davilka”)是一个开源的C语言编写的工具,模拟应用负载和成千上万的几十万人的HTTP / HTTPS和FTP/ ...