【CSS3】---:before :after生成内容
在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生成内容的更多相关文章
- 转载:css3 content 生成内容
本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...
- 【转载】css3 content 生成内容
content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...
- css权威指南学习笔记--列表与生成内容
列表属性 1.list-style-type:css2多于css2.1 2.list-style-image:有继承,子级列表会继承该图像 3.list-style-position:inside|o ...
- angluarjs2项目生成内容合并到asp.net mvc4项目中一起发布
应用场景 angular2(下文中标注位NG2)项目和.net mvc项目分别开发,前期采用跨域访问进行并行开发,后期只需要将NG2项目的生产版本合并到.net项目. NG2项目概述 ng2项目采用的 ...
- 使用NVelocity生成内容的几种方式
使用NVelocity也有几个年头了,主要是在我的代码生成工具Database2Sharp上使用来生成相关代码的,不过NVelocity是一个非常不错的模板引擎,可以用来生成文件.页面等相关处理,非常 ...
- 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版!
转--http://www.2cto.com/kf/201402/277535.html 万能js实现翻页,动态生成内容自动翻页,兼容各种浏览器(已测试)----神器版! 2014-02-11 ...
- [转]使用CSS3 Grid布局实现内容优先
使用CSS3 Grid布局实现内容优先 http://www.w3cplus.com/css3/css3-grid-layout-module.html 本文由大漠根据Rachel Andrew的& ...
- CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具
CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具,比如说border-radius.gradient.transfrom.animation.transition.rgba.text ...
- 基于ABP做一个简单的系统——实战篇:4.基于富文本编辑器,Razor模板引擎生成内容并导出Word 填坑记录
起因 需求是这样的,有一种协议需要生成,协议的模板是可配置的,在生成过程中,模板中的内容可以根据约定的标记进行替换(就像mvc的razor模板一样).生成后的内容还需要导出成word或pdf. 常见的 ...
随机推荐
- 实用的树形菜单控件tree
jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview jQuery jstree jsTree ...
- TMsgThread, TCommThread -- 在delphi线程中实现消息循环
http://delphi.cjcsoft.net//viewthread.php?tid=635 在delphi线程中实现消息循环 在delphi线程中实现消息循环 Delphi的TThread类使 ...
- Codeforces Round #215 (Div. 2) B. Sereja and Suffixes map
B. Sereja and Suffixes Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/problemset ...
- ubuntu完美卸载JDK
要删除 OpenJDK (如果已安装的话).首先,检查是安装的哪个 OpenJDK包. # dpkg --list | grep -i jdk 移除 openjdk包: # apt-get purge ...
- 为C# Windows服务添加安装程序
最近一直在搞Windows服务,也有了不少经验,感觉权限方面确定比一般程序要受限很多,但方便性也很多.像后台运行不阻塞系统,不用用户登录之类.哈哈,扯远了,今天讲一下那个怎么给Windows服务做个安 ...
- 你所不知到的C++ 系列
http://blog.csdn.net/doon/article/category/2926337
- 对shell中的与(&&)和或(||)的理解
先说明一下: 如果第一个命令执行成功,与操作符 (&&)才会执行第二个命令 如果第一个命令执行失败,或操作符 (||)才会执行第二个命令 可以分析一下下面的命令的输出: #!/bin/ ...
- Java再学习——深究static关键字
一.static关键字的用途 可以在没有创建对象的情况下来进行(方法/变量)调用.也就是,被static关键字修饰的方法或者变量不需要依赖于对象来进行访问,只要类被加载了,就可以通过类名去进行访问. ...
- js数组的管理[增,删,改,查]
今天在设计表单的时候遇到对数组的一些处理的问题,比如说怎么创建一个数组,然后牵扯到数组的增删改查的方法.请看API FF: Firefox, N: Netscape, IE: Internet Exp ...
- IOS UIwebview 背景色调整
自定义webview背景色 重点是把webview弄成透明的 然后把self.view的背景调色即可 UIWebview 背景透明处理 让 UIWebView 背景透明需要以下设置 web_abou ...