本文地址:http://www.w3cplus.com/solution/css3content/css3content.html

这篇文章挺不错的,建议看一下。

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

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

none

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

Css Code

.clearfix:after {
content: "";
visibility: hidden;
display: block;
font-size: 0;
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

attr: 插入标签属性值

普通文字demo

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

Css Code

.attr-title:after{
content:attr(title);
color:#f00;
}

图片滑过动画效果

Css Code

#imghover li{
position:relative;
margin-right:20px;
}
#imghover a:after{
content:attr(title);
position:absolute;
top:0;
left:0;
width:100%;
background-color:rgba(0,0,0,0.5);
line-height:30px;
color:#fff;
text-align:center;
font-size:14px;
text-shadow:-1px -1px 0 rgba(0,0,0,0.8);
opacity: 0;
-webkit-transition:all 0.3s ease;
-moz-transition:all 0.3s ease;
-ms-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
#imghover a:hover:after{
top:50%;
margin-top:-15px;
opacity: 1;
}

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

Css Code

#icon_list a{
font-size:16px;
}
#icon_list a[href]:before{
content:'';
margin-right:5px;
}
#icon_list a[href$='.txt']:before{
content:url(images/icon_txt.gif);
}
#icon_list a[href$='.pdf']:before{
content:url(images/icon_pdf.gif);
}
#icon_list a[href$='.doc']:before{
content:url(images/icon_doc.gif);
}
#icon_list a[href$='.jpg']:before{
content:url(images/icon_pic.gif);
}
#icon_list a[href^="mailto:"]:before{
content:url(images/icon_mailto.gif);
}

string: 插入字符串

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

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

Css Code

#counter li{
margin-left:0;
list-style:none outside none;
counter-increment: title1;
}
#counter li:before{
content:"第"counter(title1)"章:";
font-size:14px;
color:#f00;
}
#counter li li{
margin-left:25px;
counter-increment: title2;
}
#counter li li:before{
content:counter(title1)"."counter(title2);
}

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

插入特殊字符

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

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

Css Code

#special li:before,
#special li:after{
color:#f00;
}
#special li:nth-child(2n+1):before{
color:#ccc;
}
#special li:first-child:before,
#special li:first-child:after{
content:"\25ba";
}
#special li:first-child:after{
-webkit-transform:scale(-1);
-moz-transform:scale(-1);
-ms-transform:scale(-1);
-o-transform:scale(-1);
transform:scale(-1);
}
#special li:nth-of-type(2):before{
content:"\2714";
}
#special li:nth-child(3):after{
content:"\00bb";
}
#special li:last-of-type:before{
content:"\00a9";
margin-right:5px;
}

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

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

  1. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  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. 『TCP/IP详解——卷一:协议』读书笔记——18

    2013-08-27 15:44:52 第7章 Ping程序 7.1 引言 “ping”这个名字来源于声纳定为操作.Ping程序由Mike Muuss编写,目的是为了测试另一台主机是否可达.该程序发送 ...

  2. 【转】浅谈html5网页内嵌视频

    转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html

  3. 《Linux内核分析》之第三章读书笔记

    进程管理 进程是处于执行期的程序以及相关的资源的总称,也称作任务.执行线程,简称线程,是在进程中活动的对象. 可以两个或两个以上的进程执行同一个程序 也可以两个或两个以上并存的进程共享许多资源 内核调 ...

  4. java内部类以及异常处理

    框架图 内部类 将一个类定义在另一个类的里面,里面那个类就称为内部类(也叫内置类或嵌套类). 内部类的访问规则:1.内部类可以直接访问外部类中的成员,包括私有成员.    之所以可以直接访问外部类中的 ...

  5. linux sort,uniq,cut,wc命令详解

    linux sort,uniq,cut,wc命令详解 sort sort 命令对 File 参数指定的文件中的行排序,并将结果写到标准输出.如果 File 参数指定多个文件,那么 sort 命令将这些 ...

  6. HTML5-块元素标签的使用

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. caffe在windows 下的配置及matlab接口编译(无GPU)

    本人机子windows 10,matlab2015a,vs2013(官网使用的是vs2013) 1.首先去github上下载caffe的windows包,地址:https://github.com/B ...

  8. Javascript原型模式总结梳理

    在大多数面向对象语言中,对象总是由类中实例化而来,类和对象的关系就像模具跟模件一样.Javascript中没有类的概念,就算ES6中引入的class也不过是一种语法糖,本质上还是利用原型实现.在原型编 ...

  9. 浏览器兼容性小记-DOM篇(二)

    1.DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现:每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: Node.ELEMENT_NODE ...

  10. PSP个人耗时

    PSP2.1 Personal Software Process Stage Time(min) Planing 计划 20  #Estimate #估计这个任务需要多长时间 180 Developi ...