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

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

方法一、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>menu1li>      <li><a href="http://www.cnblogs.com/rubylouvre/">menu2a>li>      <li>menu3li>     <li>menu4li>  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>menu1li>      <li><a href="http://www.cnblogs.com/rubylouvre/">menu2a>li>     <li>menu3li>      <li>menu4li> 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>menu1li>     <li><a href="http://www.cnblogs.com/rubylouvre/">menu2a>li>     <li>menu3li>     <li class="last">menu4li>  ul> body> html>
转载自:http://www.cnblogs.com/rubylouvre/archive/2009/07/28/1532757.html

转载于:https://my.oschina.net/JoannaQ/blog/151474

你可能感兴趣的:(before伪类的超有用应用技巧——水平菜单竖线分隔符)