CSS content 属性
属性定义及使用说明
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
默认值: | normal |
---|---|
继承: | no |
版本: | CSS2 |
JavaScript 语法: | object.style.content="url(beep.wav)" |
浏览器支持
所有主流浏览器都支持Content属性。
注意: IE8只有指定!DOCTYPE才支持Content属性。
Content属性值
值 | 说明 |
---|---|
none | 设置Content,如果指定成Nothing |
normal | 设置content,如果指定的话,正常,默认是"none"(该是nothing) |
counter | 设定计数器内容 |
attr(attribute) | 设置Content作为选择器的属性之一。 |
string | 设置Content到你指定的文本 |
open-quote | 设置Content是开口引号 |
close-quote | 设置Content是闭合引号 |
no-open-quote | 如果指定,移除内容的开始引号 |
no-close-quote | 如果指定,移除内容的闭合引号 |
url(url) | 设置某种媒体(图像,声音,视频等内容) |
inherit | 指定的content属性的值,应该从父元素继承 |
更多实例
相关文章
CSS 参考手册: :before 伪元素
CSS 参考手册: :after 伪元素
MCCF
353***4841@qq.com
content 属性遵循一个原则:CSS 仅仅改变样式。因此,所加入的内容不会在 HTML 代码中直接展现:事实上,打开 F12 调试会发现浏览器把 before 作为一个特殊的节点嵌入到目标元素中。
这是很有用的一点,例如要制作一个伪输入元素(使用 contenteditable)时:
这一行 HTML 代码表示一个可编辑(仅允许纯文本)的段落,并且设置该“输入元素”的默认值。
但是在一般的 input 元素中还有一个 placeholder 属性,在输入框为空时展现一段文本,如:
如果要在 contenteditable 元素中仿制一个 placeholder 功能,则可以使用 CSS 实现,例如:
这时如果将段落的文本全部删除,就会显示一段 "Don't make me empty!" 的浅色文本;最重要的是它不会被加入段落文本中,只要再键入一些内容,该文本就会消失。这表明 content 不是将文本单纯地加入元素中。
另外,在content中编辑的HTML标签会被直接显示,不能用于调整新加内容的属性。如果调整样式,可以在:before或:after伪元素内进行调整。MCCF
353***4841@qq.com