: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. 基于SSH开发银行个人业务管理系统 附源码

    开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+MySql数据库 运行效果图

  2. vs2015 C语言

    1.C语言输入一行未知个数数字存入数组 参考:https://www.cnblogs.com/wd1001/p/4826855.html 2.VS2015编写C语言程序的流程 参考:http://c. ...

  3. ZOJ1006 Do the Untwist

    简单模拟~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; unordered_map<char,int> ...

  4. es 分词器介绍

    按照单词切分,不做处理 GET _analyze { "analyzer": "standard", "text": "2 run ...

  5. Spring Boot 整合MaBatis如何在控制台打印执行的SQL语句

    yml文件:logging: level: com.XXX.Mapper: debug (红色部分为Dao层的包名,注意不是XML文件的包名) properties文件: logging.level. ...

  6. js屏幕上下滚动条

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. CDH 搭建 问题

    1.  问题描述: java.sql.SQLException: Access denied for user 'xxx'@'xxx.xxx.xxx.xxx' (using password: YES ...

  8. 14.浏览器屏幕缩放bug修复

    问题:浏览器缩放时,轮播图显示不全,滚动水平滚动条,发现图片缺失 解决:隐藏水平滚动条,页面都只提供垂直滚动条的需求 global.css /* 水平超出部分默认隐藏 */ #app { overfl ...

  9. 01背包第k最优解

    附题目链接:Bone Collector II Input The first line contain a integer T , the number of cases.Followed by T ...

  10. linux动态监控dstat&&glances&&psutil&&bottle

    安装dstat yum install dstat 安装glances yum install python-devel pip install glances 如果我们安装了 Bottle 这个 w ...