CSS之生成内容

9 九, 2008 in Develop by 幻想曲

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

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

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
  *{margin:0;padding:0;}<br />
  body{font-size:9pt;}<br />
  a{text-decoration:none; display:block;}<br />
  a:hover{text-decoration:underline;}</p>
<p>#main<br />
{<br />
margin:0 auto;<br />
border:solid 1px #ccc;<br />
width:500px;<br />
height:500px;<br />
padding:10px;<br />
}<br />
a[href]:after{content:”(link)”;}<br />
a[href]:before{content:”链接”;}<br />
  </style><br />
 </head></p>
<p> <body><br />
  <div id=”main”><br />
     <a href=”http://yibin.us”>lemongtree.com</a><br />
  </div><br />
 </body><br />
</html><br />

运行代码

也可以插入图片：

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
  *{margin:0;padding:0;}<br />
  body{font-size:9pt;}<br />
  a{text-decoration:none; display:block;}<br />
  a:hover{text-decoration:underline;}</p>
<p>#main<br />
{<br />
margin:0 auto;<br />
border:solid 1px #ccc;<br />
width:500px;<br />
height:500px;<br />
padding:10px;<br />
}<br />
a[href]:after{content:url(http://yibin.us/pics/flags/cn.png);}  /*显示图片*/<br />
  </style><br />
 </head></p>
<p> <body><br />
  <div id=”main”><br />
     <a href=”http://yibin.us”>lemongtree.com</a><br />
  </div><br />
 </body><br />
</html><br />

运行代码

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

<br />
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br />
<html xmlns=”http://www.w3.org/1999/xhtml”><br />
 <head><br />
  <title> new document </title><br />
  <meta name=”generator” content=”editplus” /><br />
  <meta name=”author” content=”" /><br />
  <meta name=”keywords” content=”" /><br />
  <meta name=”description” content=”" /><br />
  <style type=”text/css”><br />
  *{margin:0;padding:0;}<br />
  body{font-size:9pt;}<br />
  a{text-decoration:none; display:block;}<br />
  a:hover{text-decoration:underline;}</p>
<p>#main<br />
{<br />
margin:0 auto;<br />
border:solid 1px #ccc;<br />
width:500px;<br />
height:500px;<br />
padding:10px;<br />
}<br />
a[href]:after{content:”{” attr(href) “}”;}<br />
  </style><br />
 </head></p>
<p> <body><br />
  <div id=”main”><br />
     <a href=”http://yibin.us”>lemongtree</a><br />
  </div><br />
 </body><br />
</html><br />

运行代码

5 Comments

tagged Others

5 Comments

回复

锐风

10 九月, 2008

抢个沙发.
感觉没什么意义. 毕竟目前还存在很多问题.
回复

小灰

11 九月, 2008

我也批示一下吧^_^
回复

benben

11 九月, 2008

Firefox3下运行正常
回复

benben

12 九月, 2008

哈哈，有发广告的了。
回复

幻想曲

12 九月, 2008

shit!
实在是没有好的办法去制止
难道评论又要进入到审核机制？

Using Gravatars in the comments - get your own and be recognized!

XHTML: These are some of the tags you can use: <a href=""> <b> <blockquote> <code> <em> <i> <strike> <strong>

- Comments
- Categories
- Tags
- Fred: mysql扩展的mysql_fetch_array函数无法使用 ......
- Rainny: 你好，我现在也遇到的这个问题，请问你解决 ......
- 习小衣: 代码。。。好多。。。好晕。。。 ......
- 幻想曲: 不是down了而是平台在做安全策略升级，封 ......
- 匿名: 但是你的机器貌似down了很长一段时间 ......
- 幻想曲: 应该在不久的将来就会对外开放吧 ......
- Develop (147)
- python (8)
- 没有分类 (32)
- 笔记本子 (92)
- 音乐人生 (29)
- ajax apache Asp.Net blogengine cache chart cookie css des discuz firefox gae GDI GFW gmail IE8 ixwebhosting Javascript jquery linq Memory mvc netbeans ofc Others PHP Provider remoting sql uc ucenter vs2008 win7 wp 分页卡农吉他山寨巴洛克序列化母亲节注入虚拟主机设计模式魂斗罗
近期文章
Meta

幻想曲.Net

面朝大海，春暖花开

CSS之生成内容

5 Comments

Leave a Reply

近期文章

Meta