: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. jstring 和char 之间的转换方法

    //jstring to char* char* jstringTostring(JNIEnv* env, jstring jstr) { char* rtn = NULL; jclass clsst ...

  2. [Hadoop源码解读]（三）MapReduce篇之Job类

    下面,我们只涉及MapReduce 1,而不涉及YARN. 当我们在写MapReduce程序的时候,通常,在main函数里,我们会像下面这样做.建立一个Job对象,设置它的JobName,然后配置输入 ...

  3. 使用 ASR 和 Azure Pack 为 IaaS 工作负荷提供托受管 DR

    Ashish Gangwar 云 + Enterprise项目经理 几周前,我们宣布了在 Azure Site Recovery 中提供一些新功能,这些新功能适用于不同场景,可以让服务提供商在 A ...

  4. apache开源项目--Apache POI

    Apache POI是一个开源的Java读写Excel.WORD等微软OLE2组件文档的项目.目前POI已经有了Ruby版本. 结构: HSSF - 提供读写Microsoft Excel XLS格式 ...

  5. MVC中的扩展点(六)ActionResult

    ActionResult是控制器方法执行后返回的结果类型,控制器方法可以返回一个直接或间接从ActionResult抽象类继承的类型,如果返回的是非ActionResult类型,控制器将会将结果转换为 ...

  6. Android 开发性能优化之SparseArray(二)

    一.SparseIntArray API SparseIntArrays map integers to integers.  Unlike a normal array of integers, t ...

  7. 嵌入式linux中使用 DHCP功能描述

    嵌入式linux中使用 DHCP功能描述 busybox中udhcpc的默认script脚本地址为#define DEFAULT_SCRIPT   CONFIG_UDHCPC_DEFAULT_SCRI ...

  8. ORA-00214: control file 控制文件版本不一致

    故障现象:今日学习oracle控制文件移动和修改,发现本机安装oracle数据库启动时只使用了一个控制文件.如下:SQL> select * from V$controlfile; STATUS ...

  9. Logo常用的12种颜色

    1.浅绿 #8cc540 2. 深绿 #009f5d 3. 暗蓝 #2456ab 4. 蓝色 #019fde 5. 深蓝 #007cdc 6. 深紫 #887ddd 7. 浅紫 #cd7bdd 8. ...

  10. HW5.10

    public class Solution { public static void main(String[] args) { int count = 0; for(int i = 1; i < ...