: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. write & read a MapFile（基于全新2.2.0API）

    write & read a  MapFile import java.io.IOException; import org.apache.hadoop.io.IntWritable; imp ...

  2. bzoj2738

    感人肺腑pascal过不去系列,跪求开O2先不说这个了,学完cdq分治之后又顺手学了一下整体二分感觉这两个东西很多相似的地方,干脆都叫cdq分治好了二分解决k小就是设当前二分的答案为m,把x<= ...

  3. bzoj3611

    会构建虚树之后就是noip提高组的题目了稍微难一点的是求代价和,只要注意按一个方向避免重复计算贡献即可 ; type node=record po,next:longint; end; ..] of ...

  4. kernel_task占用大量CPU

  5. 【转】【iOS知识学习】_视图控制对象生命周期-init、viewDidLoad、viewWillAppear、viewDidAppear、viewWillDisappear等的区别及用途

    原文网址:http://blog.csdn.net/weasleyqi/article/details/8090373 iOS视图控制对象生命周期-init.viewDidLoad.viewWillA ...

  6. Linux下的iwpriv（iwlist、iwconfig）的简单应用

    无线网络飞速发展的今天,许多设备都提供了连接无线网络的功能. 那么Linux下的wifi到底该怎么配置.连接呢?? 开始配置之前,我们要说说iw家族.iw是linux下常用的wifi配置工具,网上有相 ...

  7. druid简单教程

    java程序很大一部分要操作数据库,为了提高性能操作数据库的时候,有不得不使用数据库连接池.数据库连接池有很多选择,c3p.dhcp.proxool等,druid作为一名后起之秀,凭借其出色的性能,也 ...

  8. HDU4027 Can you answer these queries? 线段树

    思路:http://www.cnblogs.com/gufeiyang/p/4182565.html 写写线段树 #include <stdio.h> #include <strin ...

  9. LightOJ 1214 Large Division 水题

    java有大数模板 import java.util.Scanner; import java.math.*; public class Main { public static void main( ...

  10. [Rosa]Android ListView 适配器原理及优化（转）

    ListView的Adapter的作用如下图所示:   Adapter的作用就是ListView界面与数据之间的桥梁,当列表里的每一项显示到页面时,都会调用Adapter的getView方法返回一个V ...