Before和After用法小结

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中。因此,它们不是可用的。所以,不要使用伪元素生成内容,是您的网页的可用性和可访问性的关键。
  • 由于伪元素难以维护和调试缓慢,所以不要用伪元素显示内容。
时间: 2024-10-21 17:37:45

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

C++ typedef用法小结 (※不能不看※)

C++ typedef用法小结 (※不能不看※) 第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如:char* pa, pb; // 这多数不符合我们的意图,它只声明了一个指向字符变量的指针, // 和一个字符变量:以下则可行:typedef char* PCHAR; // 一般用大写PCHAR pa, pb; // 可行,同时声明了两个指向字符变量的指针虽然:char *pa, *pb;也可行,但相对来说没有用typedef的形式直观,

英语语法最终珍藏版笔记- 21it 用法小结

it 用法小结 it 在英语中的意思较多,用法较广,现总结如下. 一.it作句子的真正主语 1.it 指前面已经提到过的人或事物,有时指心目中的或成为问题的人或事物,作真正主语. 例如: What’s this? -It is a sheep? 这是什么??这是一只绵羊. Who is it? -It’s me (I). 谁??是我. It’s the wind shaking the window. 是风刮得窗户响. 2.it指时间.季节.一般用在无人称动词的主语. 例如: What time

iOS开发系列之一 - UIButton 用法小结

// 初始化按钮并设置类型 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; // 能够定义的UIButton类型有以下6种: // typedef enum { // UIButtonTypeCustom = 0, 自定义风格 // UIButtonTypeRoundedRect, 圆角矩形 // UIButtonTypeDetailDisclosure, 蓝色小箭头按钮,主要做详细说明用 // UIButto

iOS开发系列之二 - UILabel 用法小结

// 初始化标签 UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 100, 300, 150)]; // 设置标签文字 label.text = @"This is a test text.This is a test text.This is a test text."; // 设置标签文字字体 // 使用系统字体 label.font = [UIFont systemFontOfSize:20]; //

jstree用法小结

jstree是一款功能强大的插件.官网地址http://www.jstree.com/ $('#jstree').jstree({ "core" : { "animation" : 0, "themes" : { "dots": true,"icons":true ,"stripes":false}, "check_callback" : true, "mu

结构体定义 typedef struct 用法详解和用法小结

typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,struct node n;若用typedef,可以这样写,typedef struct node{}NODE; .在申请变量时就可以这样写,NODE n;区别就在于使用时,是否可以省去struct这个关键字. 第三篇:struct和typedef struct 分三块来讲述:1 首先:在C中定义一个结构体

asp.net中Page.ClientScript.RegisterStartupScript用法小结(转)

//ASP.NET后台页面跳转 Page.ClientScript.RegisterStartupScript(Page.GetType(), "", "<script>if(confirm('保存成功!是否继续添加?')){location.href='ProductonAdd.aspx'}else{location.href='ProductonList.aspx'}</script>"); //后台弹出确定框 ClientScript.

Java中static、final用法小结(转)

一.final 1.final变量: 当你在类中定义变量时,在其前面加上final关键字,那便是说,这个变量一旦被初始化便不可改变,这里不可改变的意思对基本类型来说是其值不可变,而对于对象变量来说其引用不可再变.其初始化可以在两个地方,一是其定义处,也就是说在final变量定义时直接给其赋值,二是在构造函数中.这两个地方只能选其一,要么在定义时给值,要么在构造函数中给值,不能同时既在定义时给了值,又在构造函数中给另外的值. 当函数参数为final类型时,你可以读取使用该参数,但是无法改变该参数的

转 C/C++基础知识:typedef用法小结

第一.四个用途 用途一: 定义一种类型的别名,而不只是简单的宏替换.可以用作同时声明指针型的多个对象.比如: char* pa, pb; // 这多数不符合我们的意图,它只声明了一个指向字符变量的指针, // 和一个字符变量: 以下则可行: typedef char* PCHAR; // 一般用大写 PCHAR pa, pb; // 可行,同时声明了两个指向字符变量的指针 虽然: char *pa, *pb; 也可行,但相对来说没有用typedef的形式直观,尤其在需要大量指针的地方,typed

ntp server 用法小结

今天公司要弄台NTP server作为同步时间用,故写一下用法小结 [[email protected] ~]# ntpq -p      remote           refid      st t when poll reach   delay   offset  jitter ==============================================================================*time2.isu.net.s .GPS.