: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. Java实现查看当前目录下的文件

    package com.tfj.file; import java.io.File; import java.util.ArrayList; /** * @author JackSile E-mail ...

  2. Linux kernel ‘aac_send_raw_srb’函数输入验证漏洞

    漏洞名称: Linux kernel ‘aac_send_raw_srb’函数输入验证漏洞 CNNVD编号: CNNVD-201311-422 发布时间: 2013-11-29 更新时间: 2013- ...

  3. msvc2010生成的指令序列有问题，可能跟pgo有关

    正常序列 有问题序列 这段代码程序启动是执行,会导致崩溃 工程使用ltcg pgo,也就是说,第一次编译连接完成后,会跑一次profile,再执行连接器代码生成优化. 构建记录显示,ltcg已跑完,说 ...

  4. C# 配置文件读取与修改

    C# 配置文件读取与修改   配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...

  5. 指尖下的js ——多触式web前端开发之一：对于Touch的处理

    指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...

  6. Java Socket 异常 Connection reset

    最近使用Java做Socket客户端,与C的Socket服务端交互.遇到问题:现象是可以从服务端接受小数据,但是如果接受大数据,总是遇到Connection reset的异常:如果把服务端和客户端放到 ...

  7. [新]最近用unity5弄的一些渲染

    Unity Separable Bokeh Depth-of-Field Hexagonal Blur Unity3d Realtime Dynamic Clouds Rendering hemisp ...

  8. kafka的安装和使用

    简单说kafka是一个高吞吐的分部式消息系统,并且提供了持久化. kafka的架构 • producer:消息生存者• consumer:消息消费者• broker:kafka集群的server,负责 ...

  9. [洛谷1580]yyy loves Easter_Egg I

    题目背景 Soha的出题效率着实让人大吃一惊.OI,数学,化学的题目都出好了,物理的题还没有一道.于是,Huntfire,absi2011,lanlan对soha进行轮番炸,准备炸到soha出来,不料 ...

  10. oracle 高水位线

    一.oracle 高水位线详解 一.什么是水线(High Water Mark)? 概念: 1.块: 是粒度最小的存储单位,现在标准的块大小是8K,ORACLE每一次I/O操作也是按块来操作的,也就是 ...