: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. 一个简单的C++程序及说明

    一个简单的C++程序: #include<iostream> //头文件,因为输入cin,输出cout需要iostream using namespace std; //C++标准程序库中 ...

  2. WinForm开发(5)——DataGridView控件(3)——DataGridView控件操作

    一.禁止用户改变DataGridView的列宽.行高.列头高度 1.// 禁止用户改变DataGridView1的所有列的列宽 DataGridView1.AllowUserToResizeColum ...

  3. byte的取值范围

    byte b = Byte.MAX_VALUE;        b+=1;        System.out.println(b); //输出为-128 取值范围为[-128 -  127] 解析: ...

  4. Java面向对象编程 -2

    成员属性封装 在类之中的组成就是属性和方法,一般而言方法都是对外提供服务的,所以是不会进行封装处理的,而对于属性需要较高的安全性,所以往往需要对其进行保护 这个时候就需要采用封装性对属性进行保护. 在 ...

  5. 学习笔记——springMVC架构

    springMVC是一个MVC模式的实现,至于具体什么是MVC大佬们写了多很详细的博文给出一些链接: 链接1. SpringMVC框架“简单”执行流程 1.首先用户(或浏览器)发送请求到服务端. 2. ...

  6. 洛谷 P5057 [CQOI2006]简单题（树状数组）

    嗯... 题目链接:https://www.luogu.org/problem/P5057 首先发现这道题中只有0和1,所以肯定与二进制有关.然后发现这道题需要支持区间更改和单点查询操作,所以首先想到 ...

  7. 「AT2381 [AGC015C] Nuske vs Phantom Thnook」

    题目大意 给出一个01矩阵,这个矩阵有一个特殊的性质: 对于任意两个 \(1\) 之间最多只有 \(1\) 条由 \(1\) 构成的路径.每次询问给出一个矩形范围,查询在这个范围内的联通快个数. 分析 ...

  8. 一种ui app写法

    方法一: $(function(){ // 定义一个对象 var qx={}; qx.ui={}; qx.ui.getleft=function(){ alert('qx.ui.getleft'); ...

  9. vue学习笔记：数据渲染操作

    {{xxx}} 基本的插值表达式 插值表达式 使用两个大括号 {{ data中定义的数据名 }} 可以将数据插入到指定的位置 这种写法不仅可以显示data属性里定义的值,也可以书写js中的表达式,可以 ...

  10. HTML5中改变了哪些东西？

    HTML5 推出的理由 想要把目前web上存在的各种问题一并解决 Web浏览器之间的兼容性很低 文档结构不够明确 Web应用程序的功能受到了限制 HTML5重新定义了浏览器的统一标准 HTML5 与 ...