1、说明

":before" 伪元素可以在元素的内容前面插入新内容。

":after" 伪元素可以在元素的内容之后插入新内容。

伪元素默认展示为inline，

即

display: inline;

必须写content属性，不然伪类不起作用！

2、兼容性

伪元素有2种写法，单冒号和双冒号，单冒号和双冒号作用是一样的。

兼容性查看：http://caniuse.com/#search=%3Abefore

从上图看见：IE8浏览器只支持单冒号写法，不支持双冒号写法，因此建议before和after伪元素采用单冒号写法。

3、应用

（1）清除浮动

.clearfix:after {

    content: " ";

    display: table;

}

.clearfix:after {

    clear: both;

}

（2）添加美化图标

如清除ul li显示默认的小黑点，添加美化的符号

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>css 伪元素应用--添加美化图标</title>

        <style type="text/css">

            * {

                padding: 0;

                margin: 0;

                font-size: 14px;

            }

            ul {

                margin: 100px;

                list-style: none;

            }

            li:before {

                display: inline-block;

                content: "";

                width: 4px;

                height: 4px;

                background: #0e337a;

                position: relative;

                left: 0;

                top: -3px;

                margin-right: 5px;

            }

        </style>

    </head>

    <body>

        <ul>

            <li>1、before伪元素使用</li>

            <li>2、after伪元素使用</li>

        </ul>

    </body>

</html>

效果：

说明：将伪元素设置为的块级元素，伪元素同样拥有盒模型的概念。

css before和after伪元素应用的更多相关文章

  1. css ::before和::after伪元素的用法

    css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/

  2. CSS你所不知的伪元素的用法

    你所不知的 CSS ::before 和 ::after 伪元素用法 博客分类: Div / Css / XML / HTML5   CSS 有两个说不上常用的伪类 :before 和 :after, ...

  3. CSS——你所不知的 CSS ::before 和 ::after 伪元素用法（转）

    你所不知的 CSS ::before 和 ::after 伪元素用法 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前 ...

  4. 你所不知的 CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  5. css before，after伪元素妙用

    我们知道,css伪元素包括after,before,first-letter等,通过合理的利用伪元素,我们可以让我们的结构更简洁. 通常写法如p::after{content:' '},其中conte ...

  6. CSS ::before 和 ::after 伪元素另类用法

    原文地址:http://justcoding.iteye.com/blog/2032627 CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是 ...

  7. CSS before和after伪元素

    CSS中有一个特性允许我们添加额外元素而不扰乱文档本身,它们是以CSS选择器的形式出现的,具有标签的表现效果,但是呢又不是真正的标签元素,所以叫做“伪元素”.下面就说一下常见的两个伪元素before和 ...

  8. CSS ::before 和 ::after 伪元素用法

    CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思 ...

  9. 从知乎首页用户操作入口学习到的CSS技巧 - 合理利用伪元素实现一些装饰样式

    最近在模仿做一个静态的PC版知乎,在模仿的过程中,从知乎工程师的方法中学到了不少知识,比如CSS方面的,以下介绍一个今天学到的伪元素的技巧. 示例 DOM结构为: <div class=&quo ...

  10. [转]你所不知的 CSS ::before 和 ::after 伪元素用法

    SS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此.前几天发现了 Creative Link Effects 这个非常有意思的 ...

随机推荐

  1. STM32 100 pin 多个外设译码方案 - SN74LVC1G29

    http://www.ti.com/lit/ds/symlink/sn74lvc1g29.pdf

  2. C#程序集系列08,设置程序集版本

    区别一个程序集,不仅仅是程序集名称,还包括程序集版本.程序集公匙.程序集文化等,本篇体验通过界面和编码设置程序集版本. □ 通过Visual Studio设置程序集版本 →右键项目,选择"属 ...

  3. C#程序集系列03,引用多个module

    我们经常在项目中引用程序集.通常情况下,一个程序集包含一个module,但一个程序集也可以包含多个module.本篇就来体验:在一个可以被编译成.exe可执行文件的.cs文件中引用多个module. ...

  4. springboot线程池的使用和扩展

    我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行,今天我们就来实战体验这个线程池服务: 本 ...

  5. 转: 用 Go 写一个轻量级的 ldap 测试工具

    前言 这是一个轮子. 作为一个在高校里混的 IT,LDAP 我们其实都蛮熟悉的,因为在高校中使用 LDAP 来做统一认证还蛮普遍的.对于 LDAP 的管理员而言,LDAP 的各种操作自然有产品对应的管 ...

  6. [翻译] 如何学习Cocoa

    [文章原地址]http://funwithobjc.tumblr.com/个人翻译,难免会有错误,请各位看官海涵,翻译在末尾本人将在文章的部分地方添加注释,并根据需求增减文章内容,在此对原作者辛勤劳作 ...

  7. jdbc连接遭遇RAC设备

    今天进行junit的Case回归测试,功能测试人员告知数据库ip进行了变更,于是 将jdbc连接的url进行了相应的变更如下 jdbcConnection = java.sql.DriverManag ...

  8. ubuntu上minigui调试环境的建立

    minigui一共有两个版本:商业版()和GPL版(),问了一下飞漫软件,使用商业版前期的费用是9万,有技术支持,包括5000个licenses的费用,后期10K的量的话,每个licenses要6块, ...

  9. 怎样通过terminal得到AWS EC2 instance的ip

    可得到private ip,也是本地的ip.事实上通过ifconfig也能得到: GET http://169.254.169.254/latest/meta-data/local-ipv4 公共ip ...

  10. 用Java操纵HBase数据库（新建表，插入，删除，查找）

    java代码如下: package db.insert; /* * 创建一个students表,并进行相关操作 */ import java.io.IOException; import java.i ...