Before和After用法小结

定义 :before 选择器在被选元素的内容前面插入内容。:after选择器在被选元素的内容后面插入内容。（注：必须包含content 属性）

一、特性：不能左右:empty伪类

此表现说明，空元素内部使用伪元素生成的内容，是不被:empty伪类认可的，选择器依然认为这是个空元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>不能左右:empty伪类</title>

    <style>

        .box{

            width: 256px;

            height: 90px;

            padding: 10px;

            background-color: red;

            color:#fff;

        }

        .box:empty{

            opacity: .1;

        }

        .pseudo{

            content: "伪元素生成内容";

        }

    </style>

</head>

<body>

    <div class="item">

        <div class="title">有内容</div>

        <div class="box">有内容</div>

    </div>

    <div class="item">

        <div class="title">无内容</div>

        <div class="box"></div>

    </div>

    <div class="item">

        <div class="title">空格也算内容</div>

        <div class="box"> </div>

    </div>

    <div class="item">

        <div class="title">伪元素不算内容</div>

        <div class="box pseudo"></div>

    </div>

</body>

</html>

二、特性：content动态呈现值无法获取

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            counter-reset: icecream;

        }

        input:checked {

            counter-increment: icecream;

        }

        .total::after {

            content: counter(icecream);

        }

    </style>

</head>

<body>

    <strong>下面中国十大冰淇淋你吃过几个？</strong>

    <ul>

        <li><input type="checkbox" id="icecream1"><label for="icecream1">哈根达斯</label></li>

        <li><input type="checkbox" id="icecream2"><label for="icecream2">和路雪wall's</label></li>

        <li><input type="checkbox" id="icecream3"><label for="icecream3">八喜冰淇淋</label></li>

        <li><input type="checkbox" id="icecream4"><label for="icecream4">DQ冰淇淋</label></li>

        <li><input type="checkbox" id="icecream5"><label for="icecream5">蒙牛冰淇淋</label></li>

        <li><input type="checkbox" id="icecream6"><label for="icecream6">雀巢冰淇淋</label></li>

        <li><input type="checkbox" id="icecream7"><label for="icecream7">伊利冰淇淋</label></li>

        <li><input type="checkbox" id="icecream8"><label for="icecream8">乐可可冰淇淋</label></li>

        <li><input type="checkbox" id="icecream9"><label for="icecream9">新城市冰淇淋</label></li>

        <li><input type="checkbox" id="icecream10"><label for="icecream10">明治MEIJI</label></li>

    </ul>

    你总共选择了 <strong class="total"></strong> 款冰淇淋！

</body>

</html>

三、用法：清除浮动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .clearfix:before,.clearfix:after { content: "."; display: block; height: 0; visibility: hidden; }

        .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* IE < 8 */

        .box div{width: 200px;height: 200px;background-color: red;margin-right: 20px;margin-bottom: 20px;float: left; }

        .test{clear: both;margin-top: 80px}

    </style>

</head>

<body>

    <div class="test">测试一：</div>

    <div class="box"><div></div><div></div></div>

    <div class="box"><div></div><div></div></div>

    <!--*********************************************************-->

    <div class="test">测试二：</div>

    <div class="box clearfix"><div></div><div></div></div>

    <div class="box"><div></div><div></div></div>

</body>

</html>

四、用法：做时间轴

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        ul{

            width: 635px;

            height: 100px;

            padding: 20px;

            list-style: none;

            background-color: #f5f5f5;

        }

        li{

            text-align: center;

            position: relative;

            float: left;

            padding: 2px 110px 2px 12px;

        }

        .cusicon{

            margin: 0 auto 15px auto;

            position: relative;

        }

        .tip,.time{

            position: absolute;

            left: -40px;

            text-align: center;

            width: 140px;

            font-size: 14px;

        }

        .time{

            top:75px;

            font-size: 12px;

        }

        .last:before{

            width: 0!important;

        }

        .cusicon:before{

            content:"";

            width: 100px;

            height: 3px;

            position: absolute;

            top:17px;

            right:-115px;

            background-color: #b3b3b3;

        }

        li.active .cusicon{

            background: url(sprite.png) -0px -72px no-repeat;

            width: 100%;

            height: 100%;

            _background: none;

            _padding-left: 0px;

            _margin-left: -0px;

            _padding-top: 72px;

            _margin-top: -72px;

            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");

        }

        li.active .cusicon:before{

            background-color: red!important;

        }

        .cusicon {

            height: 36px!important;

            width: 36px!important;

        }

        .cusicon_1 {

            background: url(sprite.png) -0px -0px no-repeat;

            width: 100%;

            height: 100%;

            _background: none;

            _padding-left: 0px;

            _margin-left: -0px;

            _padding-top: 0px;

            _margin-top: -0px;

            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");

        }

        .cusicon_2 {

            background: url(sprite.png) -36px -0px no-repeat;

            width: 100%;

            height: 100%;

            _background: none;

            _padding-left: 36px;

            _margin-left: -36px;

            _padding-top: 0px;

            _margin-top: -0px;

            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");

        }

        .cusicon_3 {

            background: url(sprite.png) -0px -36px no-repeat;

            width: 100%;

            height: 100%;

            _background: none;

            _padding-left: 0px;

            _margin-left: -0px;

            _padding-top: 36px;

            _margin-top: -36px;

            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");

        }

        .cusicon_4 {

            background: url(sprite.png) -36px -36px no-repeat;

            width: 100%;

            height: 100%;

            _background: none;

            _padding-left: 36px;

            _margin-left: -36px;

            _padding-top: 36px;

            _margin-top: -36px;

            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");

        }

        .cusicon_5 {

            background: url(sprite.png) -72px -0px no-repeat;

            width: 100%;

            height: 100%;

            _background: none;

            _padding-left: 72px;

            _margin-left: -72px;

            _padding-top: 0px;

            _margin-top: -0px;

            _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src="sprite.png");

        }

    </style>

</head>

<body>

<ul>

    <li class="active">

        <div class="cusicon cusicon_1"></div>

        <div class="tip">

            发布项目

        </div>

        <div class="time">2015-04-02</div>

    </li>

    <li class="active">

        <div class="cusicon cusicon_2"></div>

        <div class="tip">

            设计师报名

        </div>

        <div class="time"></div>

    </li>

    <li>

        <div class="cusicon cusicon_3"></div>

        <div class="tip">

            选择设计师/备案

        </div>

        <div class="time"></div>

    </li>

    <li>

        <div class="cusicon cusicon_4 last"></div>

        <div class="tip">

            确认完工

        </div>

        <div class="time"></div>

    </li>

</ul>

</body>

</html>

五、用法：字体文字（例如ionicfont等）

六、按钮及布局特效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        html{height: 100%;}

        body{

            margin: 0;

            background-color: #f2f2f2;

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100%;

        }

        .btn{

            width: 570px;

            height: 100px;

            text-align: center;

            line-height: 100px;

            background-color: #fff;

        }

        .btn{position:relative;}

        .btn:before, .btn:after {

            z-index: -1;

            position: absolute;

            content: "";

            bottom: 15px;

            left: 5px;

            width: 50%;

            top: 80%;

            max-width: 300px;

            background: #777;

            -webkit-box-shadow: 0 15px 10px #777;

            -moz-box-shadow: 0 15px 10px #777;

            box-shadow: 0 15px 10px #777;

            -webkit-transform: rotate(-3deg);

            -moz-transform: rotate(-3deg);

            -o-transform: rotate(-3deg);

            -ms-transform: rotate(-3deg);

            transform: rotate(-3deg);

        }

        .btn:after {

            -webkit-transform: rotate(3deg);

            -moz-transform: rotate(3deg);

            -o-transform: rotate(3deg);

            -ms-transform: rotate(3deg);

            transform: rotate(3deg);

            right: 10px;

            left: auto;

        }

    </style>

</head>

<body>

    <div class="btn"> SIGN IN </div>

</body>

</html>

七、兼容性

Chrome 2+
Firefox 3.5+ (3.0 had partial support)
Safari 1.3+
Opera 9.2+
IE8+ (with some minor bugs
几乎所有的移动浏览器
唯一真正的问题是没有获得支持的（不用奇怪）IE6和IE7

八、注意事项

由于伪元素不是真正的元素，所以不会出现在DOM中。因此，它们不是可用的。所以，不要使用伪元素生成内容，是您的网页的可用性和可访问性的关键。
由于伪元素难以维护和调试缓慢，所以不要用伪元素显示内容。

Before和After用法小结的更多相关文章

转载：Hadoop排序工具用法小结
本文转载自Silhouette的文章,原文地址:http://www.dreamingfish123.info/?p=1102 Hadoop排序工具用法小结发表于 2014 年 8 月 25 日由 ...
[No000010]Ruby 中一些百分号（%）的用法小结
#Ruby 中一些百分号(%)的用法小结 #这篇文章主要介绍了Ruby 中一些百分号(%)的用法小结,需要的朋友可以参考下 what_frank_said = "Hello!"#% ...
C++ typedef用法小结（※不能不看※）
C++ typedef用法小结 (※不能不看※) 第一.四个用途用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // 这多数不 ...
函数fgets和fputs、fread和fwrite、fscanf和fprintf用法小结（转）
函数fgets和fputs.fread和fwrite.fscanf和fprintf用法小结字符串读写函数fgets和fputs 一.读字符串函数fgets函数的功能是从指定的文件中读一个字符串到字符 ...
1:CSS中一些@规则的用法小结 2: @media用法详解
第一篇文章:@用法小结第二篇文章:@media用法第一篇文章:@用法小结这篇文章主要介绍了CSS中一些@规则的用法小结,是CSS入门学习中的基础知识,需要的朋友可以参考下 at-rule ...
英语语法最终珍藏版笔记- 21it 用法小结
it 用法小结 it 在英语中的意思较多,用法较广,现总结如下. 一.it作句子的真正主语 1．it 指前面已经提到过的人或事物,有时指心目中的或成为问题的人或事物,作真正主语. 例如: What’s ...
［转］ssh常用用法小结
ssh常用用法小结 1.连接到远程主机: 命令格式 : ssh name@remoteserver 或者 ssh remoteserver -l name 说明:以上两种方式都可以远程登录到远程主机, ...
结构体定义 typedef struct 用法详解和用法小结
typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,stru ...
typedef用法小结
typedef用法小结- - 注意:本文转自网络,版权归原作者所有. typedef typedef用法小结- - 这两天在看程序的时候,发现很多地方都用到typedef,在结构体定义,还有一些数组等 ...
NSEnumerator用法小结
NSEnumerator 3)枚举 (NSEnumerator)遍历数组每个索引处的对象,你可以编写一个0到[array count]的循环,而NSEnumerator用来描述这种集合迭代运算的方 ...

随机推荐

ps命令用法详解（转）
ps p 22763 -L -o pcpu,pid,tid,time,tname,cmd,pmem,rss --sort rss 按rss排序 ps p 26653 -L -o pcpu,tid ...
Directx11学习笔记【十三】实现一个简单地形
本文由zhangbaochong原创,转载请注明出处http://www.cnblogs.com/zhangbaochong/p/5510294.html 上一个教程我们实现了渲染一个会旋转的立方体, ...
Directx11学习笔记【十四】使用最新的Effect框架和SDK
由于之前一直在看directx11龙书学习,因此sdk一直用的Microsoft DirectX SDK (June 2010) 版本,最近在stackoverflow上问dx11相关问题时,一直被大 ...
sql基础之DDL(Data Definition Languages)
好久没写SQL语句了,复习一下. DDL数据定义语言,DDL定义了不同的数据段.数据库.表.列.索引等数据库对象的定义.经常使用的DDL语句包含create.drop.alter等等. 登录数据:my ...
OpenJDK 阅读源代码 Java 实现字节流输入类
Java 的输入输出总是给人一种非常混乱的感觉.要想把这个问题搞清楚.必须对各种与输入输出相关的类之间的关系有所了解. 仅仅有你了解了他们之间的关系.知道设计这个类的目的是什么.才干更从容的使用他们. ...
C#如何获得 WINDOWS 版本号
using System; using System.Runtime.InteropServices; namespace GetWindowsVersion { [ StructLayout( La ...
Andrew Stankevich's Contest (1)
Andrew Stankevich's Contest (1) 打一半出门了,回来才补完了...各种大数又不能上java..也是蛋疼无比 A:依据置换循环节非常easy得出要gcd(x, n) = 1 ...
SDUTOJ 1298 活动选择
#include<iostream> #include<memory.h> using namespace std; int a[105],b[105],c[105],d[10 ...
RPG游戏学习——1.任务脚本系统
[前言] 近期准备做个rpg小游戏,所以開始研究rpg的一些系统.rpg最核心的应该是任务脚本系统(其它脚本系统类似),在參考了非常多网上的资料后,简要总结例如以下. [脚本的触发运行] 一个脚本须要 ...
简单介绍如何使用PowerMock和Mockito来mock 1. 构造函数 2. 静态函数 3. 枚举实现的单例 4. 选择参数值做为函数的返回值(转)
本文将简单介绍如何使用PowerMock和Mockito来mock1. 构造函数2. 静态函数3. 枚举实现的单例4. 选择参数值做为函数的返回值5. 在调用mock出来的方法中,改变方法参数的值一 ...

Before和After用法小结

Before和After用法小结

一、特性：不能左右:empty伪类

二、特性：content动态呈现值无法获取

三、用法：清除浮动

四、用法：做时间轴

五、用法：字体文字（例如ionicfont等）

六、按钮及布局特效

七、兼容性

八、注意事项

Before和After用法小结的更多相关文章

随机推荐

热门专题