减小字体
增大字体- ·上一篇内容：英国一女子遭猎豹袭击 丈夫观看拍照而未施救
- ·下一篇内容：青岛工学院“自习座”收费引热议
CSS伪元素before的使用方法
伪元素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>
微信搜索“优雅的代码”关注本站的公众号，或直接使用微信扫描下面二维码关注本站公众号，以获取最新内容。
个人成长离不开各位的关注，你的关注就是我继续前行的动力。
- 给好评 如果您觉得此内容好，就请您
100%(1) 
- 给差评 如果您觉得此内容差，就请您
0%(0) 
评论内容只代表网友观点，与本站立场无关！
评论摘要（共 0 条，得分 0 分，平均 0 分)
查看完整评论