《CSS权威指南》学习记录——生成内容
2016-06-11 10:53
399 查看
生成内容(generated content)是指由浏览器创建的内容,而不是由标记或内容来显示。例如,列表标志就是生成内容。
显示如下:
![](http://img.blog.csdn.net/20160611104818434)
显示如下:
![](http://img.blog.csdn.net/20160611105143301)
换行的话需要用\A或\00AB。不过貌似目前不少浏览器都不支持,反正我用的几个都不行o(╯□╰)o
显示如下:
![](http://img.blog.csdn.net/20160611105748496)
所有属性值都可以作为生成内容插入。
![](http://img.blog.csdn.net/20160611105848951)
显示如下:
![](http://img.blog.csdn.net/20160611105906935)
如果一个属性不存在,会在相应位置插入一个空串。
插入生成内容
利用:before和:after伪元素可以将指定内容放在元素的前面或后面。例如:a[href]:before{content:"(link)";}
显示如下:
关于content
关键字:content。可接受:string、url、attr、normal(默认值)等。引用于:before和:after伪元素。无继承性。串
串值会原样显示,即使其中包含某种标记也不例外:h2:before{content:"<em>¶</em>";color:gray;}
显示如下:
换行的话需要用\A或\00AB。不过貌似目前不少浏览器都不支持,反正我用的几个都不行o(╯□╰)o
插入属性值
可以利用attr获取元素的属性值,使之作为文档显示的一部分。a[href]:after{content:"[" attr(href) "]";}
显示如下:
所有属性值都可以作为生成内容插入。
显示如下:
如果一个属性不存在,会在相应位置插入一个空串。
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页