方法一、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. 静态库与动态库的制作以及程序的动态函数库解析ldd；ldconfig与/etc/ld.so.conf

    静态库的制作步骤: (1)gcc -c mylib.c -o mylib.o (2)ar rc libmylib.a mylib.o 动态库的制作步骤: gcc -shared mylib.c -o ...

  2. 【Excle数据透视】多列分别分类计数

    需求 今天碰到一个很特殊的需求,如下(分别对每一列的值去重并统计个数): 预期结果 实现方法 推荐使用第三种方案,因为不用写公式,比较简单! 方法一:使用countif函数 在单元格J2输入公式COU ...

  3. DB2删除重复数据

    有时候DB2建表时不设置主键,就可能存在脏数据,例如:两条一样数据重复存在,这时候就需要将重复记录删除,然后留下一条记录. )); ----插入重复数据 ,'jack'); 插入数据后,结果如下图: ...

  4. android中checkbox的padding引发的问题

    自己定义checkbox中的勾选框图标.这次由于想偷懒.图标弄的大了些.然后一系列的问题就都引出来了. 1.图标比checkbox的layout_height高.看不见了. 非常吐血吧,Compoun ...

  5. ACCESS与MSSQL比较：SQL语句关于时间格式使用的注意点

    ACCESS与MSSQL比较:SQL语句关于时间字符串的使用:ACCESS数据库使用 # 来控制时间格式字符串:mssql数据库使用单引号 ' 来控制时间格式字符串.例: ACCESS版本:UPDAT ...

  6. 对象语义与值语义、资源管理（RAII、资源所有权）、模拟实现auto_ptr<class>、实现Ptr_vector

    一.对象语义与值语义 1.值语义是指对象的拷贝与原对象无关.拷贝之后就与原对象脱离关系,彼此独立互不影响(深拷贝).比如说int,C++中的内置类型都是值语义,前面学过的三个标准库类型string,v ...

  7. The value of 'filter_horizontal[0]' must be a many-to-many field. The value of 'raw_id_fields[0]' must be a foreign key or a many-to-many field.

    在使用django admin的时候 我们遇到这个错误 <class 'Salesman.admin.UsrMngUserAdmin'>: (admin.E020) The value o ...

  8. js与php中一些相似函数的对比

    一:substr js中:stringObject.substr(start,length)   一个中文算一个字符,一个英文也算一个字符 <script type="text/jav ...

  9. 利用docker-maven-plugin快速交测

    目的 由开发环境交测的时候,通过docker镜像简化环境搭建及项目部署的过程. 环境描述 项目开发环境: windowns7 在windowns7中通过VMware Workstation安装Cent ...

  10. Facebook Oauth2.0 API调用方法

    这些天搞了下Facebook API的东东,在官方网站下弄了一些接口,下面简单的把facebook的调用流程以及常用接口书序一下 :-)  当然在使用facebook api之前要有facebook账 ...