有时候在网页设计中会涉及到很多看上去很繁琐的设计图，这时候都会很让人头疼，那么这时候伪类就可以来帮助你解决问题了。
下面有一段实例大家可以参考一下；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
.box{
width: 800px;
height: 800px;
margin: 0 auto;
}
p{
line-height: 1.5;
}
*{
margin: 0;padding: 0;
}
.clearfix{
clear: both;
}
.left,.content,.right{
width: 200px;float: left;position:relative;
}
.content{
margin:80px 50px;
}
.left::after{
content:"";width:1px;height: 160px;position:absolute;top:50px;right:0px;background:deeppink;
}
.right::before{
content:"";width:1px;height: 160px;position:absolute;top:50px;left:-50px;background:deeppink;
}
.left-one,.content-one,.right-one{
width: 150px;height: 60px;border: 1px solid #0000C6;margin: 20px 0;position:relative;
} .left-one::after{
content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink;
} .content-one::before{
content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink;
}
.content-one::after{
content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink;
} .right-one::before{
content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink;
} </style>
<body>
<div class="box">
<div class="left">
<div class="left-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
<div class="left-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
<div class="left-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
</div>
<div class="content">
<div class="content-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
</div>
<div class="right">
<div class="right-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
<div class="right-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
<div class="right-one">
<p>大风来袭不再怕</p>
<p>大风来袭不再怕</p>
</div>
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
效果如下图所示：
途中所有的关系线全部都是有伪类写的，大家如果有什么不懂得随时可以评论下方，请赐教。