前言：刚学他两个的时候，是用于清除浮动，而且曾单纯的以为俩只有这作用。

但看到几篇博客后，发现自己是多么的无知，他两个的强大远不止于此。

当然，这篇文章大多数是借鉴网上的实例，在加上自己的些许简介而成。

首先说明几点

　　1，before和after中的之前和之后是指的是标签的左右，类似于js中的insertbefore和insertafter

　　2,不适用于单标签，例如<img>、<input>。他俩意为添加，单标签无法添加，so。。。

下面总结几个

一，巧用before实现心形背景

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         h1 {

             position: relative;

             top: 20px;

             left: 20px;

             color: #ff1f2d;

         }

         h1:before {

             position: absolute;

             top:-50px;

             font-size: 100px;

             color: #abcdef;

             content: "\2764";

             z-index: -1;

         }

     </style>

 </head>

 <body>

 <h1>晨落梦公子</h1>

 </body>

 </html>

效果图：

附上content编码：http://www.shangxueba.com/jingyan/1806634.html

二、划入变亮效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span {

             position: relative;

             top: 20px;

             left: 20px;

             color: #ffffff;

             background: coral;

             padding: 10px;

         }

         span:after {

             position: absolute;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             background: rgba(255,255, 255, .2);

             z-index: 1;

         }

         span:hover:after {

             content: "";

         }

     </style>

 </head>

 <body>

 <span>划入变亮</span>

 </body>

 </html>

三、实现行级元素换行

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span:after {

             content: "\A";

             white-space: pre;

         }

     </style>

 </head>

 <body>

 <span>aaa</span>

 <span>bbb</span>

 <span>ccc</span>

 </body>

 </html>

效果图：

总言：先总结到这吧，它的用处其实还有很多很多。。。

before和after的强大的更多相关文章

  1. Postman - 功能强大的 API 接口请求调试和管理工具

    Postman 是一款功能强大的的 Chrome 应用,可以便捷的调试接口.前端开发人员在开发或者调试 Web 程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的 Fi ...

  2. 纯JS打造比QQ空间更强大的图片浏览器-支持拖拽、缩放、过滤、缩略图等

    在线演示地址(打开网页后,点击商家图册): http://www.sport7.cn/cc/jiangnan/football5.html 先看一看效果图: 该图片浏览器实现的功能如下: 1. 鼠标滚 ...

  3. 你从未知道如此强大的ASP.NET MVC DefaultModelBinder

    看到很多ASP.NET MVC项目还在从request.querystring或者formContext里面获取数据,这实在是非常落后的做法.也有的项目建了大量的自定义的modelbinder,以为很 ...

  4. 虚拟机体验之 VirtualBox 篇 —— 性能强大的经典架构

    前两篇体验了 QEMU 和经过 KVM 加速的 QEMU,并体验了第三方虚拟机管理工具 virt-manager,让我们见识了开源社区的强大和开源虚拟机软件的高质量和高性能.这一篇,我来剖析一下 Vi ...

  5. transformjs污染了DOM?是你不了解它的强大

    原文链接: https://github.com/AlloyTeam/AlloyTouch/wiki/Powerful-transformjs 写在前面 上星期在React微信群里,有小伙伴觉得tra ...

  6. 强大的flash头像上传插件(支持旋转、拖拽、剪裁、生成缩略图等)

    今天介绍的这款flash上传头像功能非常强大,支持php,asp,jsp,asp.net 调用 头像剪裁,预览组件插件. 本组件需要安装Flash Player后才可使用,请从http://dl.pc ...

  7. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  8. 一款强大的Android网络渗透软件dsploit

    dSploit是一款基于Android系统的功能十分全面强大的网络渗透工具,可以提供给网络安全工作人员检查网络的安全性.小黑这次主要使用了其中的"简易嗅探""会话劫持&q ...

  9. 5款强大的Java Web开发工具

    1.WebBuilder这是一款开源的可视化Web应用开发和运行平台.基于浏览器的集成开发环境,采用可视化的设计模式,支持控件的拖拽操作,能轻松完成前后台应用开发:高效.稳定和可扩展的特点,适合复杂企 ...

  10. 比achartengine更加强大的Android图表控件。

    比achartengine更加强大的图表控件MPAndroidChart. 详细使用及demo:http://www.see-source.com/androidwidget/detail.html? ...

随机推荐

  1. Struts2的标签库（三）——控制标签

    Struts2的标签库(三) --控制标签 1.if/elseif/else标签 用于分支控制,取代JSP中的if语句,根据一个boolean(test属性的值)值判断是否进行下一步运算或者输出等. ...

  2. Python3基础 type获取变量的类型

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  3. Cheatsheet: 2014 09.01 ~ 09.30

    Mobile Testing Mobile: Emulators, Simulators And Remote Debugging iOS 8 and iPhone 6 for Web Develop ...

  4. 一个ListBox的例子

    1.向ListBox中放入其他控件 XAML: <Window x:Class="ItemsControls.MainWindow" xmlns="http://s ...

  5. XAF应用开发教程(七)外观控制模块

    很多时候,我们需要按照不同的条件显示不同的效果,在传统的软件开发中,我们会直接使用 控件名称.BackColor,Enable,Visible等属性进行控制. 如果一个业务对象在多处使用,要么我们会去 ...

  6. linux清空文件等有用的指令

    1).    > filename 2).    :> filename 3).   echo "" > filename  (文件大小被截为1字节) 4).   ...

  7. 巧妙的实现 CSS 斜线(炫酷的小效果)

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

  8. 【夯实Mysql基础】记一次mysql语句的优化过程！

      1. [事件起因] 今天在做项目的时候,发现提供给客户端的接口时间很慢,达到了2秒多,我第一时间,抓了接口,看了运行的sql,发现就是 2个sql慢,分别占了1秒多. 一个sql是 链接了5个表同 ...

  9. (二)shell中case语句、程序传参、while

    2.2.6.1.case语句(1)shell中的case语句和C语言中的switch case语句作用一样,格式有差异(2)shell中的case语句天生没有break,也不需要break,和C语言中 ...

  10. [html] Quirks Standards

    [产生] Standards : 从IE6开始,引入了Standards模式 Quirks  : 在IE6之前CSS还不够成熟,所以IE5等之前的浏览器对CSS的支持很差,为了兼容ie5之前的页面, ...