:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

举例：

1.结合border写个对话框的样式。

<style>

    .test-div{

        position: relative;  /*日常相对定位*/

        width:150px;

        height: 36px;

        border:black 1px solid;

        border-radius:5px;

        background: rgba(245,245,245,1)

    }

    .test-div:before,.test-div:after{

        content: "";  /*:before和:after必带技能，重要性为满5颗星*/

        display: block;

        position: absolute;  /*日常绝对定位*/

        top:8px;

        width: 0;

        height: 0;

        border:6px transparent solid;

    }

    .test-div:before{

        left:-11px;

        border-right-color: rgba(245,245,245,1);

        z-index:1

    }

    .test-div:after{

        left:-12px;

        border-right-color: rgba(0,0,0,1);

        z-index: 0

    }

  </style>

  <div class="test-div"></div>

2.作为内容的半透明背景层。

  <style>

      body{

          background: url(ABUIABACGAAg6KijvAUo1PqcwwIwgA84uwU.jpg) no-repeat left top /*这里加了个图片背景，用以区分背景的半透明及内容的完全不透明*/

      }

      .test-div{

          position: relative;  /*日常相对定位(重要，下面内容也会介绍)*/

          width:300px;

          height: 120px;

          padding: 20px 10px;

          font-weight: bold;

      }

      .test-div:before{

          position: absolute;  /*日常绝对定位(重要，下面内容也会略带介绍)*/

          content: "";  /*:before和:after必带技能，重要性为满5颗星*/

          top:0;

          left: 0;

          width: 100%;  /*和内容一样的宽度*/

          height: 100%;  /*和内容一样的高度*/

          background: rgba(255,255,255,.5); /*给定背景白色，透明度50%*/

          z-index:-1; /*日常元素堆叠顺序(重要，下面内容也会略带介绍)*/

      }

  </style>

  <!--这里容兽偷个懒，布局简单写写-->

  <body>

  <div class="test-div">

      <table>

          <tr>

              <td>Name</td>

              <td><input placeholder="your name" /></td>

          </tr>

          <tr>

              <td>Password</td>

              <td><input placeholder="your password" /></td>

          </tr>

          <tr>

              <td></td>

              <td><input type="button" value="login" /></td>

          </tr>

      </table>

  </div>

css ：after和：before的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. Linux多线程编程（不限Linux）转

    ——本文一个例子展开,介绍Linux下面线程的操作.多线程的同步和互斥. 前言 线程?为什么有了进程还需要线程呢,他们有什么区别?使用线程有什么优势呢?还有多线程编程的一些细节问题,如线程之间怎样同步 ...

  2. Good vs Evil

    Good vs Evil Description Middle Earth is about to go to war. The forces of good will have many battl ...

  3. hadoop运行流程分析源代码级

    前言: 最近一直在分析hadoop的运行流程,我们查阅了大量的资料,虽然从感性上对这个流程有了一个认识但是我总是感觉对mapreduce的运行还是没有一个全面的认识,所以决定从源代码级别对mapred ...

  4. CH Round #17 舞动的夜晚

    舞动的夜晚 CH Round #17 描述 L公司和H公司举办了一次联谊晚会.晚会上,L公司的N位员工和H公司的M位员工打算进行一场交际舞.在这些领导中,一些L公司的员工和H公司的员工之间是互相认识的 ...

  5. DD_belatedPNG,IE6下PNG透明解决方案

    我们知道IE6是不支持透明的PNG的,这无疑限制了网页设计的发挥空间. 然而整个互联网上解决这个IE6的透明PNG的方案也是多不胜数,从使用IE特有的滤镜或是e­xpression,再到javascr ...

  6. 大数加法，A+B

    A + B Problem II Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. 关于Spring的Controller及Struts的Action的多线程的注意

    struts是线程安全,并不是指多线程,而是指单态,当多个用户访问一个请求的时候,服务器内存中只有一个与之对应的action类对象,execute方法加上了同步关键字,如果你在action里加上一个全 ...

  8. lua 中pairs 和 ipairs区别

    lua 中pairs 和 ipairs区别 标准库提供了集中迭代器,包括迭代文件每行的(io.lines),迭代table元素的(pairs),迭代数组元素的(ipairs),迭代字符串中单词的 (s ...

  9. 查看Linux下*.a库文件中文件、函数、变量

    查看Linux下*.a库文件中文件.函数.变量等情况在Linux 下经常需要链接一些 *.a的库文件,那怎么查看这些*.a 中包 含哪些文件.函数.变量: 1. 查看文件:ar -t xxx.a 2. ...

  10. 正则匹配：Email 密码强度 身份证 手机号 日期 数字每4个字空一格等

    正则表达式,一个十分古老而又强大的文本处理工具,仅仅用一段非常简短的表达式语句,便能够快速实现一个非常复杂的业务逻辑.熟练地掌握正则表达式的话,能够使你的开发效率得到极大的提升.下面是在前端开发中经常 ...