伪类的使用

使用伪类画三角形

css样式

.div1{width: 300px;height: 400px;position: relative;background-color: #E6E6E6;}

.div1:before{position: absolute;content: '';width: 0;height: 0;left: -25px;top: 0px;border-left: 15px solid transparent;border-right: 15px solid #0086B3;border-top: 15px solid transparent;}

　　

html代码：

<div class="div1"></div>

　　

 

 

 使用伪类画ul  li 的分割线

css样式：

.list{width: 100%;float: left;padding: 0 20px;}
.list>li{float: left;padding: 0 10px;position: relative;line-height: 30px;list-style: none;color: #333;}

.list>li:after{position: absolute;content: '';width: 1px;height: 18px;background-color: #ccc;top: 6px;right: 0;}

　　

html代码：

<ul class="list">
    <li>文章管理</li>
    <li>专栏管理</li>
    <li>评论管理</li>
    <li>个人分类管理</li>
    <li>博客搬家</li>
    <li>博客设置</li>
    <li>栏目管理</li>

</ul>

文本头部尾部含有特殊字符使用伪类

li:before{content:'{';}

li:after{content:'}';}