: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. ASP.NET Core搭建多层网站架构【6-注册跨域、网站核心配置】

    2020/01/29, ASP.NET Core 3.1, VS2019, NLog.Web.AspNetCore 4.9.0 摘要:基于ASP.NET Core 3.1 WebApi搭建后端多层网站 ...

  2. Java 从入门到进阶之路（十八）

    在之前的文章我们介绍了一下 Java 中的正则表达式,本章我们来看一下 Java 中的 Object. 在日常生活中,任何事物我们都可以看做是一个对象,在编程中是同样的道理,在 Java 编程中其实更 ...

  3. 通过命令创建Django项目

    本人是使用window10操作系统进行讲解Django框架,Linux系统和windows版本几乎一致,可以自行学习就可以解决. 首先在系统上创建了虚拟环境,如果不会创建,可以根据这篇文章学习:htt ...

  4. 利用 systemd 实现 Clash 开机自启

    利用 systemd 实现 Clash 开机自启 首先准备 Clash 的服务脚本,并保存为/etc/systemd/system/clash.service.内容如下: [Unit] Descrip ...

  5. Bugku-CTF加密篇之easy_crypto（0010 0100 01 110 1111011 11 11111 010 000 0 001101 1010 111 100 0 001101 01111 000 001101 00 10 1 0 010 0 000 1 01111 10 11110 101011 1111101）

    easy_crypto 0010 0100 01 110 1111011 11 11111 010 000 0 001101 1010 111 100 0 001101 01111 000 00110 ...

  6. Spring Boot 学习方法论-如何正确的入门 Spring Boot

    想要入门 Spring Boot,那么什么样的教程是符合初学者学习的(没有太多的Java基础但有一些程序基础或者软件编程知识). 这恰好能够勾出很多问题,比如是文章图文教程适合还是视频教程适合零基础初 ...

  7. __str__()方法和__repr__()方法

    有时候我们想让屏幕打印的结果不是对象的内存地址,而是它的值或者其他可以自定义的东西,以便更直观地显示对象内容,可以通过在该对象的类中创建或修改__str__()或__repr__()方法来实现(显示对 ...

  8. gym102220H 差分+树状数组（区间修改和输出）

    这题目很有意思,让我学会了树状数组的差分,更加深刻理解了树状数组 树状数组的差分写法 void add(int x,int k) { for (int i = x;i <= n;i += low ...

  9. 《程序之美系列（套装共6册）》[美]斯宾耐立思 等 (作者) epub+mobi+azw3

    <架构之美>内容包括:facebook的架构如何建立在以数据为中心的应用生态系统之上.xen的创新架构对操作系统未来的影响.kde项目的社群过程如何让软件的架构从粗略的草图成为漂亮的系统. ...

  10. [ DLPytorch ] 文本分类&图像增强

    图像增强 图像增广(image augmentation)技术通过对训练图像做一系列随机改变,来产生相似但又不同的训练样本,从而扩大训练数据集的规模.图像增广的另一种解释是,随机改变训练样本可以降低模 ...