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. 总结下git中一些常用命令

    一.目录操作 1.cd 即change directory,改变目录,如 cd d:/www,切换到d盘的www目录. 2.cd .. cd+空格+两个点,回退到上一目录. 3.pwd 即 print ...

  2. 使用注册表优化终端、编辑器的中英字体混合显示，如「Consolas + 雅黑」「Monaco + 雅黑」

    在终端.cmd.编辑器中偶尔会有中文字符出现,Windows下默认的点阵字体「宋体」和等宽英文字符放在一起非常违和.一个解决方法是下载混合字体,比如「Consolas + YAHEI hybrid」, ...

  3. USB ISP(ICSP) Open Programmer < PWM ADC HV PID >

    http://sourceforge.net/projects/openprogrammer/?source=navbar Open Programmer http://openprog.alterv ...

  4. JavaScript也能求爱哦

    这里面做了一个JavaScript的求爱小特效,效果例如以下: 不仅能出现以下的图的效果,还能够让这个图形尾随着鼠标转动哦,这里面仅仅是一个简单的没有修饰的小样例,基于这个样例能够让求爱,更加好玩了. ...

  5. 用最简单的例子理解观察者模式(Observer Pattern)

    假设有一个软件公司,每当有新产品推出,就把信息通知到一些客户. 把通知这个动作抽象成一个接口. public interface IService { void Notif(); } 客户如果想获得通 ...

  6. 在使用完全拷贝过来的类文件（带xib文件）时，要及时修改 File's Owner

  7. python笔记30-docstring注释添加变量

    前言 python里面添加字符串注释非常简单,如何将变量放入 python 的函数注释里面呢? docstring也就是给代码加注释的内容了,python可以给函数,类.方法,模块添加注释内容,注释标 ...

  8. 解决“listView点击一个Item，另外几个Item也跟着改变”的问题

    如图所看到的: 我点击Item,右边的checkBox就会对应的变化.可是当我第一次做的时候.点击第一个Item,右边的checkBox变为绿色,可是当我listView往下拉的时候,发现以下也有是绿 ...

  9. [翻译] The Amazing Audio Engine

    The Amazing Audio Engine https://github.com/TheAmazingAudioEngine/TheAmazingAudioEngine The Amazing ...

  10. Mantis集成 LDAP 认证

    mantis的用户认证函数Authentication中相关有 $g_login_method MD5 LDAP PLAIN CRYPT CRYPT_FULL_SALT BASIC_AUTH Some ...