: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. 【HDOJ】1071 The area

    数学题,先求抛物线和直线的系数,再利用积分公式求面积. #include <stdio.h> #include <math.h> int main() { double x1, ...

  2. Android开发之AlertDialog

    http://www.cnblogs.com/Gaojiecai/archive/2011/12/10/2283156.html http://www.2cto.com/kf/201205/13187 ...

  3. 转载：CEO应向软件工程师学习的7个技能

    软件工程师的哪些技能是值得CEO学习的?显然,软件工程师是逻辑的,高效的,注重细节的,有计划的,并且大多数CEO也是如此.但是,软件工程师还有一些更微妙,甚至是令人懊恼的品质,那么CEO是否可以从中学 ...

  4. bzoj3165 1568

    1568是3165的弱化版,发的代码是3165的这道题完全没想出来,是看wyl大神的题解http://hi.baidu.com/wyl8899/item/2deafd3a376ef2d46d15e99 ...

  5. POJ_1064_Cable_master_(二分,假定一个解并判断是否可行)

    描述 http://poj.org/problem?id=1064 有n条绳子,长度分别为l[i].如果从它们中切割出k条长度相同的绳子的话,这k条绳子每条最长能有多少? Cable master T ...

  6. [HDU 1963] Investment

    Investment Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu   Descrip ...

  7. 利用HttpWebRequest和HttpWebResponse获取Cookie

    之前看过某个同学的一篇有关与使用JSoup解析学校图书馆的文章,仔细一看,发现竟然是同校!!既然对方用的是java,那么我也就来个C#好了,虽然我的入门语言是java. C#没有JSoup这样方便的东 ...

  8. [备忘]WCF中使用MessageContract的一些注意点

    准备使用WCF完成上传文件,以取代之前HTTP POST的方式. 但是调试了很久一直报错,后来经过一些修改终于通过,以下是一些可能需要注意的地方: 1.在WCF服务的OperatorContract ...

  9. Ubuntu 安装Chrome步骤

    一.添加PPA 从Google Linux Repository(http://www.google.com/linuxrepositories/)下载安装Key,或把下面的代码复制进终端,回车,需要 ...

  10. UVA 540 Team Queue

    思路:使用优先队列,按队伍出现的时刻和自身出现的时刻定义优先级,同时记录此时刻队列里是否有自己队伍的人,一开始没注意,wa了两发. #include<map> #include<qu ...