方法一、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. POI生成EXCEL文件（字体、样式、单元格合并、计算公式）

    创建一个封装类: package com.jason.excel; import java.io.FileNotFoundException; import java.io.FileOutputStr ...

  2. Xcode5 打包 发布配置

    http://www.cnblogs.com/zhaoqingqing/p/3553750.html 主题 Unity导出Xcode项目,使用Xocde打包ipa并提交到AppStore 步骤 1.设 ...

  3. 算法笔记_135:格子取数问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 有n*n个格子,每个格子里有正数或者0,从最左上角往最右下角走,只能向下和向右走,一共走两次(即从左上角往右下角走两趟),把所有经过的格子里的数加起 ...

  4. 正确用DD测试磁盘读写速度

    转自:http://blogread.cn/it/article/6479?f=wb 问: 以下几种方式测试磁盘读写速度有什么区别? dd bs=1M count=128 if=/dev/zero o ...

  5. ant design pro （六）样式

    一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...

  6. mysql的grant用法(转)

    GRANT USAGE ON *.* TO 'discuz'@'localhost' IDENTIFIED BY PASSWORD '*C242DDD213BE9C6F8DA28D49245BF69F ...

  7. ArcGis10.0常见错误

    1. 问题:  Arcgis10.0 组件初始化失败 解决方法:  ESRI.ArcGIS.RuntimeManager.BindLicense(ESRI.ArcGIS.ProductCode.Eng ...

  8. Oracle XE安装具体解释

    一.原数据库的卸载       数据库的卸载就不多说了,讲一下过程:       1.运行Oracle Uninstall,卸载Oracle产品     2.删除regedit下的全部Oracle相关 ...

  9. MongoDB Query 的几个方法

    Query.All("name", "a", "b");//通过多个元素来匹配数组Query.And(Query.EQ("name ...

  10. 【Android】14.1 内部文件存储和读取

    分类:C#.Android.VS2015: 创建日期:2016-02-27 一.简介 内部存储(Internal storage)是指将应用程序建立的私有文件保存在内部存储器(移动经销商卖的那种容量较 ...