欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 编程资源 > 编程问答 >内容正文

编程问答

before伪类的超有用应用技巧——水平菜单竖线分隔符

发布时间：2025/6/15 编程问答 39 豆豆
生活随笔 收集整理的这篇文章主要介绍了 before伪类的超有用应用技巧——水平菜单竖线分隔符 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

方法一、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

转载于:https://www.cnblogs.com/JoannaQ/p/3161942.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的before伪类的超有用应用技巧——水平菜单竖线分隔符的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。