:after和:before是css3中的伪类元素。用法是像元素的前或者后插入元素。以after为例：

li:after{

            content: '';

            color: #ff0000;

        }

意思是向li元素后插入一个元素，content里面是内容，下面接属性，和css写法一样。但是在实际当中我们肯定会说，直接在HTML中添加一个标签不就好了吗？

是的，这是最简单的方法。但是如果我们要添加的东西只是为了页面的优化的，而不存在实际的作用。还在里面加吗？比如我们常常接触到的清除浮动的作用，举个栗子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            background-color: aquamarine;

        }

        li{

            list-style: none;

            width: 100px;

            height:20px;

            border:1px solid #ff0000;

            float: left;

        }

    </style>

</head>

<body>

    <ul id="ul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li class="li">4</li>

    </ul>

    <div>下面的内容</div>

    <script>

    </script>

</body>

</html>

效果如下：

我们的实际需求是
下面的DIV在另一行显示。这该怎么办呢。别急，有办法：overflow:hidden;

ul{

            background-color: aquamarine;

            overflow: hidden;

        }

显示如下：

但是如果我们的li标签有下拉菜单呢。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            background-color: aquamarine;

            overflow: hidden;

        }

        li{

            list-style: none;

            width: 100px;

            height:20px;

            border:1px solid #ff0000;

            float: left;

            position: relative;

        }

        dl{

            position: absolute;

            top:0;

            left:0;

            width: 100px;

        }

        dd,dt{

            width: 100px;

        }

    </style>

</head>

<body>

<ul id="ul">

    <li>1

        <dl>

            <dd>我是下拉</dd>

            <dt>2</dt>

            <dt>2</dt>

            <dt>2</dt>

        </dl>

    </li>

    <li>2</li>

    <li>3</li>

    <li class="li">4</li>

</ul>

<div>下面的内容</div>

<script>

</script>

</body>

</html>

完全被遮住了，有没有？那这个overflow:hidden;的方法肯定不可取

那么怎么办呢。清除浮动。对！

clear:both;清除浮动对下面元素的影响。这里可以用到:after了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            background-color: aquamarine;

            /*overflow: hidden;*/

        }

        li{

            list-style: none;

            width: 100px;

            height:20px;

            border:1px solid #ff0000;

            float: left;

            position: relative;

        }

        ul:after{

            content: '';

            height:0;

            display: block;

            clear: both;

        }

        dl{

            position: absolute;

            top:0;

            left:0;

            width: 100px;

        }

        dd,dt{

            width: 100px;

        }

    </style>

</head>

<body>

<ul id="ul">

    <li>1

        <dl>

            <dd>我是下拉</dd>

            <dt>2</dt>

            <dt>2</dt>

            <dt>2</dt>

        </dl>

    </li>

    <li>2</li>

    <li>3</li>

    <li class="li">4</li>

</ul>

<div>下面的内容</div>

<script>

</script>

</body>

</html>

如图：

OK了吗？还没呢！经测试在ie6/7完全无效。。。万恶之源。。。。。ie6/7不支持:after等伪类元素。

但是世上无难事我们可以用js来解决。（搜索到的。。）

动态的插入dom就可以了。

var $beforeAfter = function(dom) {

        if (document.querySelector || !dom && dom.nodeType !== 1) return;

        var content = dom.getAttribute("data-content") || '';

        var before = document.createElement("before")

            , after = document.createElement("after");

// 内部content

        before.innerHTML = content;

        after.innerHTML = content;

// 前后分别插入节点

        dom.insertBefore(before, dom.firstChild);

        dom.appendChild(after);

    };

        $beforeAfter(document.getElementById("ul"));

具体代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin:0;

            padding:0;

        }

        ul{

            background-color: aquamarine;

        }

        li{

            list-style: none;

            width: 100px;

            height:20px;

            border:1px solid #ff0000;

            float: left;

        }

        ul:after,ul after{   /*注意看这里*/

            content: attr(data-content);

            clear: both;

            height:0;

            display: block;

        }

    </style>

</head>

<body>

    <ul id="ul">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li class="li">4</li>

    </ul>

    <div>下面的内容</div>

    <script>

        var $beforeAfter = function(dom) {

        if (document.querySelector || !dom && dom.nodeType !== 1) return;

        var content = dom.getAttribute("data-content") || '';

        var before = document.createElement("before")

            , after = document.createElement("after");

// 内部content

        before.innerHTML = content;

        after.innerHTML = content;

// 前后分别插入节点

        dom.insertBefore(before, dom.firstChild);

        dom.appendChild(after);

    };

        $beforeAfter(document.getElementById("ul"));

    </script>

</body>

</html>

测试完毕，完全有效。。

伪类:after,:before的用法的更多相关文章

  1. CSS3 伪类选择器 nth-child() 的用法

    伪类选择器 nth-child() 在IE6-8和FF3.0-浏览器不支持,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等, ...

  2. CSS :hover伪类选择定义和用法

    伪类选择符E:hover的定义和用法: 设置元素在其鼠标悬停时的样式.E元素可以通过其他选择器进行选择,比如使用类选择符.id选择符.类型选择符等等.特别说明:IE6并非不支持此选择符,但能够支持a元 ...

  3. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  4. CSS 属性 :before && :after的用法，伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  5. CSS伪类对象before和after的用法

    一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅 ...

  6. 关于css伪类:hover的用法

    关于伪类:hover大家都用过,也比较熟悉.今天介绍一种新的用法(不是我发现的,但是以前一直没这么用过).在Chrome浏览器下,当a标签使用display:black;时a:hover的属性浏览器就 ...

  7. css伪类及伪元素用法

    注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的读者可以自己尝试: :active  大致效果为用鼠标 ...

  8. CSS之 :before && :after的用法，伪类和伪元素的区别

    一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...

  9. css伪类元素：after 的多功能用法——任意大小的底边框

    需求用法出现的背景: 由于项目UI的优化,项目中所有tab导航选中的状态都是统一样式书写的,之前都是用的border-bottom,新的需求如果用以前的本办法就是定位一个选中边框在底部,但是涉及的模板 ...

随机推荐

  1. 探讨 Git 代码托管平台的若干问题

    关于 Git 版本控制软件种类繁多,维基百科收录的最早的版本控制系统是 1972 年贝尔实验室开发的 Source Code Control System.1986 年 Concurrent Vers ...

  2. .NET中的字符串(1):字符串 - 特殊的引用类型

    C# string 特殊的引用类型 .Net 框架程序设计(修订版)中有这样一段描述:String类型直接继承自Object,这使得它成为一个引用类型,也就是说线程上的堆栈上不会驻留有任何字符串.(译 ...

  3. 【代码学习】PYTHON 抛出异常

    class ShortInputException(Exception): '''你定义的异常类.''' def __init__(self, length, atleast): Exception. ...

  4. 软件版本 Alpha、Beta、Rc

    软件版本的周期 α.β.γ 表示软件测试中的三个阶段 α :第一阶段,内部测试使用 β: 第二阶段,消除了大部分不完善的地方,仍可能存在漏洞,一般提供给特定的用户使用 γ: 第三阶段,产品成熟,个别地 ...

  5. codeforces Round #611

    这种凌晨场真的折寿 就过了四题,8wa结尾心态炸裂,求别被hack,再hack就要爬了 A2   B8   C38(1)   E1:58(7) D题感觉可以写,但是没有时间看了.幸好E最后发现了自己的 ...

  6. Mac 下 vim 常用命令

    vim 三种模式:命令模式.插入模式.底线命令模式. 切换模式: 命令模式: 启动 vim 进入命令模式: i 切换到插入模式,以输入字符. x   删除当前光标所在处的字符. :   切换到底线命令 ...

  7. vjudge Trailing Zeroes (III) （二分答案 && 数论）

    嗯... 题目链接:https://vjudge.net/contest/318956#problem/E 这道题是二分答案+数论,但首先是数论,否则你不知如何二分... 首先关于一个阶乘的结果最后会 ...

  8. vs code插件大全

    一.HTML Snippets 超级使用且初级的H5代码片段以及提示 二.HTML CSS Support  让HTML标签上写class智能提示当前项目所支持的样式 三.Debugger for C ...

  9. Nginx常用模块及作用

    Nginx模块详解 nginx模块分为两种,官方和第三方,我们通过命令 nginx -V 查看 nginx已经安装的模块! [root@localhost ~]# nginx -V nginx ver ...

  10. 【网寻】mui - 点击事件

    //本来是需要这样的,结果点击无响应 $(".mui-control-item").on("click",function(event){ alert(1) } ...