CSS之生成内容

« FaceYourManaga,创建你自己的卡通头像吧

再游西湖 »

2008-09

分类:Web标准,关键词:No Data

已有 1,479 位领导视察,其中有 5 位领导做了批示.

关闭google ads

注：IE8以前的版本均不支持该特性
为了向文档中插入生成内容，可以使用:before与:after伪元素。

如，我想在所有链接的后面加上"(link)"，可以这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  *{margin:0;padding:0;}
  body{font-size:9pt;}
  a{text-decoration:none; display:block;}
  a:hover{text-decoration:underline;}

#main
{
margin:0 auto;
border:solid 1px #ccc;
width:500px;
height:500px;
padding:10px;
}
a[href]:after{content:"(link)";}
a[href]:before{content:"链接";}
  </style>
 </head>

 <body>
  <div id="main">
     <a href="http://www.lemongtree.com">lemongtree.com</a>
  </div>
 </body>
</html>

运行代码

也可以插入图片：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  *{margin:0;padding:0;}
  body{font-size:9pt;}
  a{text-decoration:none; display:block;}
  a:hover{text-decoration:underline;}

#main
{
margin:0 auto;
border:solid 1px #ccc;
width:500px;
height:500px;
padding:10px;
}
a[href]:after{content:url(http://www.lemongtree.com/pics/flags/cn.png);}  /*显示图片*/
  </style>
 </head>

 <body>
  <div id="main">
     <a href="http://www.lemongtree.com">lemongtree.com</a>
  </div>
 </body>
</html>

运行代码

当然，还有插入属性值：
如
a[href]:after{content:attr(href);}
这样会将链接的href属性写在链接之后

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
  *{margin:0;padding:0;}
  body{font-size:9pt;}
  a{text-decoration:none; display:block;}
  a:hover{text-decoration:underline;}

#main
{
margin:0 auto;
border:solid 1px #ccc;
width:500px;
height:500px;
padding:10px;
}
a[href]:after{content:"{" attr(href) "}";} 
  </style>
 </head>

 <body>
  <div id="main">
     <a href="http://www.lemongtree.com">lemongtree</a>
  </div>
 </body>
</html>

运行代码