减小字体
增大字体- ·上一篇文章：网页设计中使用CSS正确设置行高
- ·下一篇文章：CSS伪元素first-letter的使用方法
CSS伪元素before的使用方法
：2012-05-07 07:01:42
伪元素before是在css2中添加的新元素，并在以后的版本中不断得到完善，其主要目的是在元素的前面插入内容。
使用这个伪元素可以在指定内容前加入文字、图片、声音以及其他特效等。
例如，在某个元素前面加入图片内容：
p.list{border-bottom:#ccc dotted 1px;}
p.list:before{content:url(icon.gif); margin-left:5px; }
这里实现在元素list前加入一个图标。
效果如下：
完整例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" http-equiv="keywords" content="CSS,伪元素,样式表,样式表案例,CSS学习" />
<meta name="description" http-equiv="description" content="本文以案例的形式讲解了CSS样式表伪元素before的使用方法" />
<title>CSS伪元素before的使用—翔宇亭IT乐园</title>
<style>
p.list{
border-bottom:#CCC dotted 1px;
}
p.list:before
{
content:url(li.gif);
margin-left:5px;
}
</style>
</head>
<body>
<p>翔宇亭IT乐园当前的主要栏目有：</p>
<p class="list">IT知识库</p>
<p class="list">休闲娱乐</p>
<p class="list">软件下载</p>
<p class="list">不知道就问问吧</p>
<p class="list">站长博客</p>
</body>
</html>
CSS伪元素before的使用方法
