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

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

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

首先说明几点

　　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. BZOJ 3674: 可持久化并查集加强版

    题目链接:http://www.lydsy.com:808/JudgeOnline/problem.php?id=3674 题意:三种操作:(1)合并ab所在集合:(2)查询ab是否在一个集合:(3) ...

  2. JAVA的文件创建

    package com.xia; import java.io.*; public class test2 { public static void main(String[] args) { //输 ...

  3. 【转】JSP总结

    day1 JSP 定义:     1)Java Server Page, Java EE 组件,本质上是 Servlet.     2)运行在 Web Container.接收 Http Reques ...

  4. Django serializers 序列化 rest_framework

    参考官方文档1(你懂的):http://www.django-rest-framework.org/api-guide/serializers/ 参考官方文档2(你懂的):http://www.dja ...

  5. 【转】基于APD的光电探测器电路研究与设计

    光电探测器电路用于对光电转换器件输出的微弱电压或电流信号进行放大.处理和整形输出.对于不同探测用途而采用的光电转换器件不同,与之配合使用的光电探测器电路性能也因此而不同.如果用来进行光电转换,则重点考 ...

  6. [SAP ABAP开发技术总结]动态语句、动态程序

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. [C和指针]第五部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. POJ 3461 Oulipo（乌力波）

    POJ 3461 Oulipo(乌力波) Time Limit: 1000MS   Memory Limit: 65536K [Description] [题目描述] The French autho ...

  9. Installing Python 3.5.2 from source

    Here are the procedures we are to follow, Download the source code of an official Python release. Co ...

  10. 让WinForm窗体的大小固定，不能调整大小

    窗体FormBorderStyle属性设置为:FixedSingle,再把最大化禁用就可以了