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

before伪类的超有用应用技巧——水平菜单竖线分隔符的更多相关文章

  1. iOS 开发的9个超有用小技巧

    http://www.jianshu.com/p/221507eb8590 1.如何快速的查看一段代码的执行时间. 1 2 #define TICK   NSDate *startTime = [NS ...

  2. js进阶 10-10 可见伪类选择器和内容伪类选择器的作用

    js进阶 10-10  可见伪类选择器和内容伪类选择器的作用 一.总结 一句话总结:分组来描述.内容伪类选择器就是  四个  包含.可见的伪类选择器就是可见和不可见.查找功能,也就是内容伪类选择器非常 ...

  3. :after伪类+content内容生成经典应用举例

    一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...

  4. :after伪类+content内容生成经典应用举例——张鑫旭

    一.简单说说content内容生成 content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容. ...

  5. Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

    转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOC ...

  6. CSS的伪类 :before 和 :after

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  7. 谈谈一些有趣的CSS题目（十）-- 结构性伪类选择器

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. 解密jQuery内核 Sizzle引擎筛选器 - 位置伪类（一）

    本章开始分析过滤器,根据API的顺序来 主要涉及的知识点 jQuery的组成 pushStack方法的作用 sizzle伪类选择器 首页我们知道jQuery对象是一个数组对象 内部结构 jQuery的 ...

  9. jQuery - 自定义伪类 [:pseudoclass]

    有两种创建伪类的方法, 第一种, $.extend( $.expr[':'], { // 自定义的伪类名称:group group: function(element, index, matches, ...

随机推荐

  1. log4cplus的安装与使用初步

    1. 简单介绍 log4cplus是C++编写的开源的日志系统,The purpose of this project is to port the excellentLog for Java (lo ...

  2. 算法笔记_030:回文判断（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 给定一个字符串,如何判断这个字符串是否是回文串? 所谓回文串,是指正读和反读都一样的字符串,如madam.我爱我等. 2 解决方案 解决上述问题,有 ...

  3. ubuntu 14.04为/检查磁盘时发生严重错误的解决方法

    http://jingyan.baidu.com/article/0aa22375bbffbe88cc0d6419.html

  4. 在CentOS上安装Git(转)

    CentOS的yum源中没有git,只能自己编译安装,现在记录下编译安装的内容,留给自己备忘. 确保已安装了依赖的包 yum install curl yum install curl-devel y ...

  5. 调整弹出对话框在ASP.NET应用程序的大小

    调整弹出对话框在ASP.NET应用程序的大小 #region 调整弹出对话框在ASP.NET应用程序的大小    protected void PopupWindowControl_Customize ...

  6. export、exports、modules.exports 和 require 、import 的一些组合套路和坑

    推荐阅读第三方文章: http://www.tuicool.com/articles/uuUVBv2 引入: require / import 导出:export / module.exports / ...

  7. jquery获取元素索引值index()

    jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 ...

  8. Linux下使用DD命令测试磁盘读写速度

    dd是Linux/UNIX 下的一个非常有用的命令,作用是用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换,所以可以用来测试硬盘的读写能力~ 几种常见的DD命令,先看一下区别~ dd bs=6 ...

  9. Linux下磁盘管理命令df与du

    Linux下磁盘管理命令df与du  对磁盘进行查看和控制的两个linux命令,df和du.  一.du命令 首先看一下du的help说明: [root@misdwh opt]# du --help ...

  10. 安装vim 出现 terminal libary 错误，解决方法

    通过源码安装vim时,提示缺少terminal libary 而在安装ncurses以后,此问题照样出现. 经过查找资料发现.运行例如以下命令就能够正常安装vim <pre name=" ...