方法一、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. Python模块学习 --- urllib

    urllib模块提供的上层接口,使我们可以像读取本地文件一样读取www和ftp上的数据.每当使用这个模块的时候,老是会想起公司产品的客户端,同事用C++下载Web上的图片,那种“痛苦”的表情.我以前翻 ...

  2. react 中使用 lodash 中的 _.throttle

    1.场景: 首次调用执行一次,一定时间内再次调用,不再执行. 2.实现 debounce (函数去抖) 多次触发,只在最后一次触发时,执行目标函数. _.debounce(func, [wait=0] ...

  3. 【centos6.5】安装LNMP（linux公社）

    1:查看环境: 1 2 [root@10-4-14-168 html]# cat /etc/redhat-release CentOS release 6.5 (Final) 2:关掉防火墙 1 [r ...

  4. ORA-12519：数据的连接池访问过多

    今天服务部同事问我一个问题,客户处的报表一半能打开,一半报错如下: Io 异常: Connection refused(DESCRIPTION=(TMP=)(VSNNUM=185599744)(ERR ...

  5. MySQL-锁研究

    隔离级别研究: http://www.cnblogs.com/JohnABC/p/3521061.html 表级:引擎 MyISAM, 理解为锁住整个表, 锁定期间, 其它进程无法对该表进行写操作, ...

  6. Linux-软件包管理-yum在线管理-光盘yum源

    mount /dev/cdrom /mnt/cdrom 将设备名/dev/cdrom安装到mnt/cdrom挂载点下面mount 查看当前所有挂载信息 cd /etc/yum.repos.d 切换到e ...

  7. mosquitto -- 权限配置

    Mosquitto 权限是根据 topic 控制的.类似与目录管理.您可以设定每个用户订阅/发布权限.也可以设定每个用户可访问的topic范围.从而达到权限控制的目的. 这里我们需要我另外一个帖子(用 ...

  8. EMQTT benchmark测试

    #-c 最大的客户端数据, -i:时间间隔 -t:订阅主题 -q:订阅方式 ./emqtt_bench_sub -c 50000 -i 10 -t bench/%i -q 2 notice: You ...

  9. Python3.2官方文档翻译--输出格式化

    第八章 标准库二 第二部分涵盖了很多更能满足专业开发者需求的高级模块.这些模块在小脚本中非常少出现. 8.1 输出格式化 Reprlib模块为大型的或深度嵌套的容器缩写显示提供了repr()函数的一个 ...

  10. MFC总结之CListCtrl用法及技巧（二）

    续第一篇:MFC总结之CListCtrl用法及技巧(一) http://blog.csdn.net/zwgdft/article/details/7560592 本篇重点介绍:禁止拖动表头.让第一列居 ...