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. CentOS的update-grub2命令

    这个和Ubuntu还是有些区别,在CentOS修改成如下: grub2-mkconfig -o /boot/grub2/grub.cfg

  2. OpenCV/CUDA/Qt 环境配置小结

    OpenCV Qt CUDA windows环境下 配置 反复装过几次,每次都网搜攻略:自个做个记录 方便以后使用. 碰到OpenCV各种奇怪的错误 先看看 图片imread() 有没有读空 再找其他 ...

  3. Error : The specified component was not reported by the VSS writer (Error 517) in Windows Server 2012 Backup

    Error : The specified component was not reported by the VSS writer (Error 517) in Windows Server 201 ...

  4. wrap ConcurrentDictionary in BlockingCollection

    ConcurrentDictionary<int, BlockingCollection<string>> mailBoxes = new ConcurrentDictiona ...

  5. bt z

    比特币从2008年开始启动,到09年创始区块的出现,甚至一直到10年和11年都只是中本聪自己一个人在运行这套程序.在早期这个极少数人参与到游戏里,大家运行一个软件,这个软件既是钱包也是挖矿软件,进行P ...

  6. iOS动画相关(持续更新)

    1.When my application is entering background, because the user push the home button, the animations ...

  7. mongodb 只查询一个字段

    db.users.find({}, {"userName":1,"_id":0}) ; "_id":0表示不显示_id

  8. kafka系列文章索引（结束）

    apache kafka在数据处理中特别是日志和消息的处理上会有很多出色的表现,这里写个索引,关于kafka的文章暂时就更新到这里,最近利用空闲时间在对 kafka做一些功能性增强,并java化,虽然 ...

  9. Node.js安装备忘录

    一.准备工作 Node.js下载地址 http://nodejs.org/download/ Current version: v0.10.29 二.平台的选择 2.1 Windows平台 根据自己平 ...

  10. DIV+CSS自适应窗口高度

    <html> <head> <title>DIV+CSS自适应窗口高度</title> <style type="text/css&qu ...