content属性用于定义元素之前或之后放置的生成内容。
注意:content 属性常于与 :before
及 :after
伪元素配合使用,来插入生成内容。
content:none|normal|counter|attr(attribute)|string|A|inherit;
A包括5种,见下表所示。
属性 | 说明 |
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属性的值,应该从父元素继承 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web(Html5+Css3)</title>
<style>
a:after {content: " (" attr(href) ") 欢迎鱼油!";}
</style>
</head>
<body>
<p><a href="http://bbs.fishc.com/forum.php">鱼C论坛</a> - 让编程改变世界</p>
<p><a href="http://www.ilovefishc.com">鱼C主页</a> - 让编程改变世界</p>
</body>
</html>
鱼C论坛 - 让编程改变世界
鱼C主页 - 让编程改变世界
content属性设置,会为每个链接后的括号内加上“”网址“”和“”欢迎鱼油!“”。
表格中的数字表示支持该属性的第一个浏览器版本号。
Safari | Chrome | FireFox | IE |
1.0 | 1.0 | 1.0 | 8.0 |