content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种:

  1. none: 不生成任何值。
  2. attr: 插入标签属性值
  3. url: 使用指定的绝对或相对地址插入一个外部资源(图像,声频,视频或浏览器支持的其他任何资源)
  4. string: 插入字符串

none

其实我们常用的clearfix就是应用了这个none了

css code

  1. .clearfix:after {
  2. content: "";
  3. visibility: hidden;
  4. display: block;
  5. font-size: 0;
  6. clear: both;
  7. height: 0;
  8. }
  9. * html .clearfix { zoom: 1; } /* IE6 */
  10. *:first-child+html .clearfix { zoom: 1; } /* IE7 */

attr: 插入标签属性值

普通文字demo

青,取之于蓝,而青于蓝;冰,水为之,而寒于水。

css code

  1. .attr-title:after{
  2. content:attr(title);
  3. color:#f00;
  4. }

图片滑过动画效果

css code

  1. #imghover li{
  2. position:relative;
  3. margin-right:20px;
  4. }
  5. #imghover a:after{
  6. content:attr(title);
  7. position:absolute;
  8. top:0;
  9. left:0;
  10. width:100%;
  11. background-color:rgba(0,0,0,0.5);
  12. line-height:30px;
  13. color:#fff;
  14. text-align:center;
  15. font-size:14px;
  16. text-shadow:-1px -1px 0 rgba(0,0,0,0.8);
  17. opacity: 0;
  18. -webkit-transition:all 0.3s ease;
  19. -moz-transition:all 0.3s ease;
  20. -ms-transition:all 0.3s ease;
  21. -o-transition:all 0.3s ease;
  22. transition:all 0.3s ease;
  23. }
  24. #imghover a:hover:after{
  25. top:50%;
  26. margin-top:-15px;
  27. opacity: 1;
  28. }

url: 使用指定的绝对或相对地址插入一个外部资源

css code

  1. #icon_list a{
  2. font-size:16px;
  3. }
  4. #icon_list a[href]:before{
  5. content:'';
  6. margin-right:5px;
  7. }
  8. #icon_list a[href$='.txt']:before{
  9. content:url(images/icon_txt.gif);
  10. }
  11. #icon_list a[href$='.pdf']:before{
  12. content:url(images/icon_pdf.gif);
  13. }
  14. #icon_list a[href$='.doc']:before{
  15. content:url(images/icon_doc.gif);
  16. }
  17. #icon_list a[href$='.jpg']:before{
  18. content:url(images/icon_pic.gif);
  19. }
  20. #icon_list a[href^="mailto:"]:before{
  21. content:url(images/icon_mailto.gif);
  22. }

string: 插入字符串

其实关于插入字符串,这个页面结构已经应用了很多了,第一个是h2标题左边的蓝色一块,第二个是鼠标滑过代码区的动画效果,第三个就是footer部分的emailto旁边的小图标,如果有兴趣可以用firebug查看查看,这个主要说下如何应用content做计数器

  1. css3新增的选择器
    1. 属性选择器
    2. 结构伪类选择器
  2. 增强的文本和颜色功能
    1. 文本阴影,文本换行,溢出文本
    2. rgba色彩模式
  3. 新增的弹性盒模型
    1. box布局
    2. 弹性布局实战

css code

  1. #counter li{
  2. margin-left:0;
  3. list-style:none outside none;
  4. counter-increment: title1;
  5. }
  6. #counter li:before{
  7. content:"第"counter(title1)"章:";
  8. font-size:14px;
  9. color:#f00;
  10. }
  11. #counter li li{
  12. margin-left:25px;
  13. counter-increment: title2;
  14. }
  15. #counter li li:before{
  16. content:counter(title1)"."counter(title2);
  17. }

关于content计数器的应用可以参考这两篇文章CSS Counters – The Right Way to Organize Your Ordered ContentCSS content, counter-increment 和 counter-reset详解

插入特殊字符

在这篇文章的最后,说下如何在content里面插入特殊字符,关于特殊字符可以参考这里:html特殊字符,请先查阅其实用方法,即第一列为符号;第二列为html中使用的,需在前面加上&#;第三排css中可以使用,不过需要反斜杠\转义。下面实例操作下

  • css3新增的选择器
  • 增强的文本和颜色功能
  • 新增的弹性盒模型
  • copyright

css code

  1. #special li:before,
  2. #special li:after{
  3. color:#f00;
  4. }
  5. #special li:nth-child(2n+1):before{
  6. color:#ccc;
  7. }
  8. #special li:first-child:before,
  9. #special li:first-child:after{
  10. content:"\25ba";
  11. }
  12. #special li:first-child:after{
  13. -webkit-transform:scale(-1);
  14. -moz-transform:scale(-1);
  15. -ms-transform:scale(-1);
  16. -o-transform:scale(-1);
  17. transform:scale(-1);
  18. }
  19. #special li:nth-of-type(2):before{
  20. content:"\2714";
  21. }
  22. #special li:nth-child(3):after{
  23. content:"\00bb";
  24. }
  25. #special li:last-of-type:before{
  26. content:"\00a9";
  27. margin-right:5px;
  28. }

注:这里顺便多应用了下css3的子元素选择器,然后对于第一的after箭头,通过transform的scale为-1来左右调转

更多资料

转自:http://www.w3cplus.com/solution/css3content/css3content.html

【转载】css3 content 生成内容的更多相关文章

  1. 转载:css3 content 生成内容

    本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...

  2. CSS3 动态生成内容(在Web中插入内容)====CSS的伪类或者伪元素

    # css3 .类:伪类::伪元素 /* CSS3伪元素/伪类 :https://www.w3.org/TR/css3-selectors/#selectors ::selection 伪元素(F12 ...

  3. 【CSS3】---:before :after生成内容

    在Web中插入内容,在CSS2.1时代依靠的是JavaScript来实现.但进入CSS3进代之后我们可以通过CSS3的伪类“:before”,“:after”和CSS3的伪元素“::before”.“ ...

  4. css权威指南学习笔记--列表与生成内容

    列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...

  5. angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布

    应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...

  6. 使用NVelocity生成内容的几种方式

    使用NVelocity也有几个年头了,主要是在我的代码生成工具Database2Sharp上使用来生成相关代码的,不过NVelocity是一个非常不错的模板引擎,可以用来生成文件.页面等相关处理,非常 ...

  7. 转载---CSS3实现曲线阴影和翘边阴影

    预备知识 DIV+CSS基础 圆角:border-radius 2D变换:transform:skew && rotate 伪类::before 和 :after 代码 HTML结构代 ...

  8. css3 -- 自动生成序号(不使用JS,可任意排序)

    需求:一个table 需要在第一列生成序号:1.2.3.4.5......  并且自适应行数 不使用后台程序,开始考虑使用JS,但是一旦前台排序后,序号就乱了,最后采用CSS的一个计数器方法实现! & ...

  9. 基于ABP做一个简单的系统——实战篇:4.基于富文本编辑器,Razor模板引擎生成内容并导出Word 填坑记录

    起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...

随机推荐

  1. Etag缓存在PHP和NodeJS中的实现

    HTTP 提供了许多页面缓存的方案,其中属 Etag 和 Last-Modified 应用最广.本文会先介绍 Etag 的应用场景,然后说说他在 php 和 node 中的使用. 本文地址:http: ...

  2. 走进AngularJs(七) 过滤器(filter)

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们 ...

  3. [.NET自我学习]Delegate 泛型

    阅读导航 委托Delegate 泛型 1. 委托Delegate 继承自MulticastDelegate 声明委托定义签名: public delegate int DemoDelegate(int ...

  4. MYSQL分页存储过程及事务处理

    最近给客户做的一小系统是SQLSERVER的数据库,因为特殊原因要切换到MYSQL上去,切换数据库确实让人头疼的,SQLSERVER和MYSQL的存储过程还是有很大差别的,下面是我做切换时转换的MYS ...

  5. IOS UIView 01-View开始深入 绘制像素到屏幕上

    注:本人是翻译过来,并且加上本人的一点见解. 前言 一个像素是如何绘制到屏幕上去的?有很多种方式将一些东西映射到显示屏上,他们需要调用不同的框架.许多功能和方法的结合体.这里我们大概的看一下屏幕之后发 ...

  6. 分割超大Redis数据库例子

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/124.html?1455853509 薄荷 App 上的伙伴功能大量使用了 ...

  7. Ghost博客安装

    Ghost博客是一个基于Node.js 的开源博客平台,由前WordPress UI 部门主管John O'Nolan 和WordPress 高级工程师Hannah Wolfe 创立,目的是为了给用户 ...

  8. 删除顽固node_modules

    在工作中有用到gulp,webpack,使用他们需用依赖node的一些模块包,于是会在目录下生成一个node_modules文件夹.有一次想删掉它重新生成模块包的时候发现根本不太可能,无穷无尽的报一个 ...

  9. Atitit 图像处理 灰度图片 灰度化的原理与实现

    Atitit 图像处理 灰度图片 灰度化的原理与实现 24位彩色图与8位灰度图 首先要先介绍一下24位彩色图像,在一个24位彩色图像中,每个像素由三个字节表示,通常表示为RGB.通常,许多24位彩色图 ...

  10. Linux初学 - 解决chkconfig Segmentation fault(core dumped)

    yum install *chkconfig*