IE8 CSS之生成内容

作者：幻想曲　来源：幻想曲blog　发布时间：2008-09-09 22:14:00　

标签：内容,浏览器,css

注：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.Aspxhome.com">Aspxhome.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(/file/UploadPic/20089/9/200899221657528.png);} /*显示图片*/ </style> </head> <body> <div id="main"> <a href="http://www.Aspxhome.com">Aspxhome.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.Aspxhome.com">lemongtree</a> </div> </body></html>

投稿

IE8 CSS之生成内容

猜你喜欢