方法一、li前面加before伪类
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>菜单</title> <style type="text/css" title="default" media="screen"> ul { padding:0; margin:0; font:0.9em Verdana; } li { display:inline; color:green; } li~li:before { content:"|"; padding-right:5px; color:red; } li a{ display:block;text-decoration:none;background:#CC99CC;} li a{ display:inline;} </style> </head> <body> <ul> <li>menu1</li> <li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li> <li>menu3</li> <li>menu4</li> </ul> </body> </html>
二、或利用相邻选择符加after伪类
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>菜单</title> <style type="text/css" title="default" media="screen"> ul { padding:0; margin:0; font:0.9em Verdana; } li { display:inline; color:green; } li+li:before { content:"|"; padding-right:5px; color:red; } li a{ display:block;text-decoration:none;background:#CC99CC;} li a{ display:inline;} </style> </head> <body> <ul> <li>menu1</li> <li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li> <li>menu3</li> <li>menu4</li> </ul> </body> </html>
三、或利用相邻选择符加after伪类。
由于IE6不支持，我们可以利用负margin技术变通一下，但还是要多添加一个类……
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>菜单</title> <style type="text/css" title="default" media="screen"> ul { padding:0; margin:0; font:0.9em Verdana; } li { display:inline; color:green; padding:0 5px;border-right:1px solid red;margin-left:-1px;} li a{ display:block;text-decoration:none;background:#CC99CC;} li a{ display:inline;} li.last {border-width:0;} </style> </head> <body> <ul> <li>menu1</li> <li><a href="http://www.cnblogs.com/rubylouvre/">menu2</a></li> <li>menu3</li> <li class="last">menu4</li> </ul> </body> </html>
转载自：http://www.cnblogs.com/rubylouvre/archive/2009/07/28/1532757.html