在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

content配合CSS的伪类或者伪元素，一般可以做以下四件事情：

功能

功能说明

none

不生成任何内容

attr

插入标签属性值

url

使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源）

string

插入字符串

实例展示：

在CSS中有一种清除浮动的方法叫“clearfix”。而这个“clearfix”方法就中就使用了“content”，只不过只是在这里插入了一个空格。如下所示：

.clearfix:before,

.clearfix:after {

       content:””;

       display:table;

}

.clearfix:after {

       clear:both;

       overflow:hidden;

}

上面这个示例是最常见的，也是最简单的，我们再来看一个插入元素属性值的方法。

假设我们有一个元素：

<a href="##" title="我是一个title属性值，我插在你的后面">我是元素</a>

可以通过”:after”和”content:attr(title)”将元素的”title”值插入到元素内容“我是元素”之后：

a:after {

  content:attr(title);

       color:#f00;

}

效果如下：

例子：

页面

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS生成内容</title>

<link href="style.css" rel="stylesheet" type="text/css">

</head>

<body>

<h1>我是标题，在我前面插入内容吧</h1>

</body>

</html>

css

h1:before {

  content:"我是添加进来的";

  color: red;

}

效果

【CSS3】---:before :after生成内容的更多相关文章

  1. 转载：css3 content 生成内容

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

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

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

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

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

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

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

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

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

  6. 万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！

    转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11     ...

  7. [转]使用CSS3 Grid布局实现内容优先

    使用CSS3 Grid布局实现内容优先  http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...

  8. CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具

    CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具,比如说border-radius.gradient.transfrom.animation.transition.rgba.text ...

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

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

随机推荐

  1. iOS开发-HTTP请求

    什么是URL?URL就是资源的地址.位置,互联网上的每个资源都有一个唯一的URLURL的基本格式: URL中常见的协议 (1)HTTP 超文本传输协议,访问的是远程的网络资源,格式是http:// h ...

  2. MyEclipse使用总结——使用MyEclipse打包带源码的jar包

    平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不到jar包里面的类的源码了,所以也就无法调试,要想调试,那么就只能通过关联源代码的形式,这样或多或少也有一些不方便,今 ...

  3. [NOIP 2014复习]第三章：动态规划——NOIP历届真题回想

    背包型动态规划 1.Wikioi 1047 邮票面值设计 题目描写叙述 Description 给定一个信封,最多仅仅同意粘贴N张邮票,计算在给定K(N+K≤40)种邮票的情况下(假定全部的邮票数量都 ...

  4. C++进制转换（十进制转二进制、八进制、随意进制）

    十进制转二进制: //十进制转二进制 #include<iostream> using namespace std; void printbinary(const unsigned int ...

  5. 2013 Fench Open quart-semifnl press conference

    http://v.youku.com/v_show/id_XNTY3NTAwOTA4.html?firsttime=179 Novak, very  congradutlations,  to rea ...

  6. PHP 自动生成导航网址的最佳方法 v20130826

    经常制作开发不同的网站的后台,写过很多种不同的后台导航写法. 最终积累了这种最写法,算是最好的吧.附上截图和代码如下(PHP+HTML) <?php $linkArr = array( 'ind ...

  7. TOJ3649欧拉回路

    欧拉回路   Time Limit(Common/Java):1000MS/3000MS     Memory Limit:65536KByte Total Submit: 35            ...

  8. mysql主从复制详解

    http://blog.csdn.net/hguisu/article/details/7325124

  9. Linux网卡高级命令、IP别名及多网卡绑定 转

    http://www.cnblogs.com/xiaoluo501395377/archive/2013/05/26/3100065.html 本篇随笔将详细讲解Linux系统的网卡高级命令.IP别名 ...

  10. [原创]SSIS-WMI 数据读取器任务：监控物理磁盘空间

    背景:       随着时间的推移,我们的DW会越来越大,也就意味着磁盘空间会越来越小,那如果哪一天留意不当,就会造成磁盘空间的不足而导致ETL失败,最终影响我们的系统的数据正确性和使用,更严重的有可 ...