Thursday, January 31, 2008

CSS content generator and :before usage


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>css trick</title>
<style type="text/css">
a[href^="mailto:"]:hover:after { content: " > " attr(title) }
a:focus { font-size: 14pt; text-decoration: underline; color: purple; }
</style>
</head>
<body>
<h2>Thomas Jefferson</h2>
<p><a href="mailto:thomasjefferson@whitehouse.gov" title="thomasjefferson@whitehouse.gov">Send Email</a> :focus(伪对象),设置对象在成为输入焦点(该对象的 onfocus 事件发生)时的样式. :after和:focus伪对象IE不支持,本段程序在IE里无效. content属性一般是结合:after和:before使用,在文档流某个节点后面或者前面加入新的内容,其中有个attr()方法可以读取此节点的属性值.</p>
</body>
</html>

No comments :