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. Maven学习-使用Nexus搭建Maven私服

    为什么要搭建nexus私服,原因很简单,有些公司都不提供外网给项目组人员,因此就不能使用maven访问远程的仓库地址,所以很有必要在局域网里找一台有外网权限的机器,搭建nexus私服,然后开发人员连到 ...

  2. MyBatis入门实例-包括实体类与数据库字段对应&CLOB字段处理

    1.我的开发环境是 jdk1.7+ecplise+oracle 11g 用到的jar包:mybatis-3.1.1.jar ojdbc6.jar 2.项目整体结构     3.首先配置conf.xml ...

  3. ECCV 2014 Results (16 Jun, 2014) 结果已出

    Accepted Papers     Title Primary Subject Area ID 3D computer vision 93 UPnP: An optimal O(n) soluti ...

  4. jQuery制作水平多级下拉菜单

    本篇体验使用jQuery制作水平的.多级的.下拉菜单. 下拉菜单的html部分如下. <body> <nav class="main-nav"> <u ...

  5. Blocks与Dispatch Queue的使用

    block是什么block是一个C level的语法以及运行时的一个特性,和标准C中的函数(函数指针)类似.用于回调函数的地方.两个对象间的通讯.实现轻量级的“代理”. blocks和C语言函数指针的 ...

  6. 每天进步一点点——论fork()函数与Linux中的多线程编程

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/27316803 一.fork()函数     在操作系统的基本概念中进程是程序的一次运行,且是 ...

  7. Spring-4.0 + Quartz-2.2.1 集群实例(Tomcat+Memcached+Quartz集群session共享)还是没有解决Serializable序列化

  8. 嵌入式linux GUI--DirectFB + GTK至尊秘笈

    前言 数年前,曾经开发过一个嵌入式的产品,如今市场依然存在,但由于电子产品的升级换代很快,许多元器件都采购不到了,为了延续产品的生命周期,计划在linux平台上开发新的版本.而在linux上的GUI上 ...

  9. Action过滤器使用实例(一)

    1.实例一 /// <summary> /// 需要用户登陆的 action,执行提前验证 /// </summary> public class LoginFilterAtt ...

  10. 安装在virtualbox中的kali linux如何配置无线网卡

    1.安装在virtualbox里的kali无法使用所在物理机的wifi 2.必须通过usb方式,如图所示 3.所使用的usb无线网卡必须是kali2.0支持的 4.我的型号是TL-WN823N 2.0 ...