返回到：CSS 计数器 | CSS教程
属性定义及使用说明
content 属性与 :before 及 :after 伪元素配合使用，来插入内容。
| 默认值： | normal |
|---|---|
| 继承： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.content=”url(beep.wav)” |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 属性 | 谷歌 | IE | 火狐 | 苹果 | opera |
|---|---|---|---|---|---|
| content | 1.0 | 8.0 | 1.0 | 1.0 | 4.0 |
content 语法与属性值
语法格式：
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;| 值 | 说明 |
|---|---|
| none | 设置 content 为空值。 |
| normal | 在 :before 和 :after 伪类元素中会被视为 none，即也是空值。 |
| counter | 设定计数器，格式可以是 counter(name) 或 counter(name,style) 。产生的内容是该伪类元素指定名称的最小范围的计数；格式由style指定（默认是’decimal’——十进制数字） |
| attr(attribute) | 将元素的 attribute 属性以字符串形式返回。。 |
| string | 设置文本内容 |
| open-quote | 设置前引号 |
| close-quote | 设置后引号 |
| no-open-quote | 移除内容的开始引号 |
| no-close-quote | 移除内容的闭合引号 |
| url(url) | 设置某种媒体（图像，声音，视频等内容）的链接地址 |
| inherit | 指定的 content 属性的值，应该从父元素继承 |
实例
以下实例将在每个链接后的括号内加上网址（href 属性）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web176教程网(web176.com)</title>
<style>
a:after {
content: " (" attr(href) ")";
}
</style>
</head>
<body>
<p><a href="https://www.web176.com">web176教程</a> - 免费的编程学习网站。</p>
<p><a href="https://www.web176.com">Google</a> - 好用的搜索引擎。</p>
</body>
</html>补充
content 属性遵循一个原则：CSS 仅仅改变样式。因此，所加入的内容不会在 HTML 代码中直接展现：事实上，打开 F12 调试会发现浏览器把 before 作为一个特殊的节点嵌入到目标元素中。
这是很有用的一点，例如要制作一个伪输入元素（使用 contenteditable）时：
<p contenteditable="plaintext-only">默认值</p>
这一行 HTML 代码表示一个可编辑（仅允许纯文本）的段落，并且设置该“输入元素”的默认值。
但是在一般的 input 元素中还有一个 placeholder 属性，在输入框为空时展现一段文本，如：
<input type="text" value="默认值" placeholder="占位文本">
如果要在 contenteditable 元素中仿制一个 placeholder 功能，则可以使用 CSS 实现，例如：
p:empty:before
{
color: #CCC;
content: "Don't make me empty!";
}这时如果将段落的文本全部删除，就会显示一段 “Don’t make me empty!” 的浅色文本；最重要的是它不会被加入段落文本中，只要再键入一些内容，该文本就会消失。这表明 content 不是将文本单纯地加入元素中。另外，在content中编辑的HTML标签会被直接显示，不能用于调整新加内容的属性。如果调整样式，可以在:before或:after伪元素内进行调整。
作者：terry，如若转载，请注明出处：https://www.web176.com/cssprop/5252.html
支付宝 
微信 