有时候在网页设计中会涉及到很多看上去很繁琐的设计图，这时候都会很让人头疼，那么这时候伪类就可以来帮助你解决问题了。
下面有一段实例大家可以参考一下；
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style type="text/css"> 8 .box{ 9 width: 800px; 10 height: 800px; 11 margin: 0 auto; 12 } 13 p{ 14 line-height: 1.5; 15 } 16 *{ 17 margin: 0;padding: 0; 18 } 19 .clearfix{ 20 clear: both; 21 } 22 .left,.content,.right{ 23 width: 200px;float: left;position:relative; 24 } 25 .content{ 26 margin:80px 50px; 27 } 28 .left::after{ 29 content:"";width:1px;height: 160px;position:absolute;top:50px;right:0px;background:deeppink; 30 } 31 .right::before{ 32 content:"";width:1px;height: 160px;position:absolute;top:50px;left:-50px;background:deeppink; 33 } 34 .left-one,.content-one,.right-one{ 35 width: 150px;height: 60px;border: 1px solid #0000C6;margin: 20px 0;position:relative; 36 } 37 38 .left-one::after{ 39 content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink; 40 } 41 42 .content-one::before{ 43 content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink; 44 } 45 .content-one::after{ 46 content:"";width:50px;height: 1px;position:absolute;top:30px;right:-50px;background:deeppink; 47 } 48 49 .right-one::before{ 50 content:"";width:50px;height: 1px;position:absolute;top:30px;left:-50px;background:deeppink; 51 } 52 53 54 </style> 55 <body> 56 <div class="box"> 57 <div class="left"> 58 <div class="left-one"> 59 <p>大风来袭不再怕</p> 60 <p>大风来袭不再怕</p> 61 </div> 62 <div class="left-one"> 63 <p>大风来袭不再怕</p> 64 <p>大风来袭不再怕</p> 65 </div> 66 <div class="left-one"> 67 <p>大风来袭不再怕</p> 68 <p>大风来袭不再怕</p> 69 </div> 70 </div> 71 <div class="content"> 72 <div class="content-one"> 73 <p>大风来袭不再怕</p> 74 <p>大风来袭不再怕</p> 75 </div> 76 </div> 77 <div class="right"> 78 <div class="right-one"> 79 <p>大风来袭不再怕</p> 80 <p>大风来袭不再怕</p> 81 </div> 82 <div class="right-one"> 83 <p>大风来袭不再怕</p> 84 <p>大风来袭不再怕</p> 85 </div> 86 <div class="right-one"> 87 <p>大风来袭不再怕</p> 88 <p>大风来袭不再怕</p> 89 </div> 90 </div> 91 <div class="clearfix"></div> 92 </div> 93 </body> 94 </html>
效果如下图所示：
途中所有的关系线全部都是有伪类写的，大家如果有什么不懂得随时可以评论下方，请赐教。