方法一、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. 算法笔记_027:俄式乘法（Java）

    1 问题描述 首先,了解一下何为俄式乘法?此处,借用<算法设计与分析基础>第三版上一段文字介绍: 2 解决方案 具体编码如下: package com.liuzhen.chapter4; ...

  2. How to make a custom WIDGET in OpenERP

    转自:http://sahotaparamjitsingh.blogspot.com/2012/04/how-to-make-custom-widget-in-openerp.html   Hello ...

  3. Linux中more和less命令用法（转）

    一.more命令 more功能类似 cat ,cat命令是整个文件的内容从上到下显示在屏幕上. more会以一页一页的显示方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按 ...

  4. 在Jquery validation里验证通过后，自定义提交不同的action路径，适合一个窗口既可以作为添加对话框也可以作为编辑对话框

    $("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 ignore: '#Password,#ConfirmPass ...

  5. 〖Linux〗Debian 7.1.0 Wheezy使用ltib报错的解决办法

    报错内容: scue@Link:/home/work/ltib$ ./ltib Processing platform: Phytec board with the NXP LPC32XX SoC = ...

  6. window 10下 MySql5.7压缩包安装

    步骤如下: 1. 解压缩到某位置, 在其根目录下 新建data空目录, 新建my.ini,内容如下: [mysql] default-character-set=utf8 [mysqld] port ...

  7. Android 图片混排富文本编辑器控件

    概述 一个Android 图片混排富文本编辑器控件(仿兴趣部落) 详细 代码下载:http://www.demodashi.com/demo/12032.html 一.一个Android 图片混排富文 ...

  8. Think in Java(二)：初始化与清理

    1. 区分重载方法: 參数顺序的不同能够区分两个方法,只是,普通情况下千万别这么做.由于这会使代码难以维护不能通过返回值类型来区分重载方法:由于假设我直接调用f(), 此时java不知道应该调用那一个 ...

  9. Unity3D游戏开发之SQLite让数据库开发更简单

    各位朋友大家好.欢迎大家关注我的博客,我是秦元培,我是博客地址是http://blog.csdn.net/qinyuanpei.在经历了一段时间的忙碌后,博主最终有时间来研究新的东西啦,今天博客向和大 ...

  10. Zoie中文文档及简单解析

    https://linkedin.jira.com/wiki/pages/viewpage.action?pageId=4456480 一.总体架构 Zoie是一个实时的搜索引擎系统,其需要逻辑上独立 ...