在英文单词里面：before是在什么之前。after是在什么之后。诚然，在我们的css里面，
通过使用before和after伪类元素，可以在我们想要的元素前面或者后面插入内容。
下面是使用before和after伪类元素实现的几种效果。

第一类：清除浮动（清除浮动我理解的是，你的代码块不影响其他代码块）。

第二类：实现before+图片


第三类：before+竖线


第四类：brfore+横线


第五类：after+三角形


第六类：before+实心三角


第七类：after+浮层

那些神奇的before和after使用方法的更多相关文章

  1. JavaScript数组方法--filter、find、findIndex

    继续数组方法,今天应该到filter了. filter:filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素. 使用: var words = ['spray', 'lim ...

  2. 为什么在Java中不使用finalize()方法

    我们都知道finalize()方法是回收分配给对象的内存之前调用垃圾收集器线程的基本语句.在这篇文章中,我们将会深入这个方法. 这篇文章中的章节: 1.finalize()方法不能保证执行(这个将要用 ...

  3. Springboot 优雅停止服务的几种方法

    在使用Springboot的时候,都要涉及到服务的停止和启动,当我们停止服务的时候,很多时候大家都是kill -9 直接把程序进程杀掉,这样程序不会执行优雅的关闭.而且一些没有执行完的程序就会直接退出 ...

  4. 第1节 Scala基础语法：5、6、7、8、基础-申明变量和常用类型，表达式，循环，定义方法和函数

    4.    Scala基础 4.1.   声明变量 package cn.itcast.scala object VariableDemo {   def main(args: Array[Strin ...

  5. [1.6W字] 浏览器跨域请求限制的详细原理分析&寻找一种最简单的方式实现XHR跨域(9种方法, 附大招可以纯前端实现跨域!)

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  6. [1.6W字]浏览器跨域请求的原理, 以及解决方法(可以纯前端实现) #flight.Archives011

    Title/ 浏览器跨域(CrossOrigin)请求的原理, 以及解决方案详细指南 #flight.Archives011 序: 最近看到又有一波新的创作活动了, 官方给出的话题中有一个" ...

  7. Java函数式编程：一、函数式接口，lambda表达式和方法引用

    Java函数式编程 什么是函数式编程 通过整合现有代码来产生新的功能,而不是从零开始编写所有内容,由此我们会得到更加可靠的代码,并获得更高的效率 我们可以这样理解:面向对象编程抽象数据,函数式编程抽象 ...

  8. BZOJ 1876: [SDOI2009]SuperGCD

    1876: [SDOI2009]SuperGCD Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 3060  Solved: 1036[Submit][St ...

  9. Java this的一两点使用

    Java this的一两点使用 之前的文章都是关于Android的使用,这次想写一些关于Java的知识,总结一下Java的使用.这次写的是关于Java this的使用,介绍以下内容: this的概念 ...

随机推荐

  1. Nginx基于TCP/UDP端口的四层负载均衡（stream模块）配置梳理

    通过我们会用Nginx的upstream做基于http/https端口的7层负载均衡,由于Nginx老版本不支持tcp协议,所以基于tcp/udp端口的四层负载均衡一般用LVS或Haproxy来做.至 ...

  2. 分布式监控系统Zabbix-3.0.3-完整安装记录（3）-监控nginx，php，memcache，Low-level discovery磁盘IO

    前段时间在公司IDC服务器上部署了zabbix3.0.3监控系统,除了自带的内存/带宽/CPU负载等系统资源监控模板以及mysql监控模板外,接下来对诸如nginx.php.memcache.磁盘IO ...

  3. 项目开发之package.json

    Name 必须字段. 提示: 不要在name中包含js, node字样: 这个名字不能以点号或下划线开头: 这个名字不能包含有大写字母: 这个名字可能在require()方法中被调用,所以应该尽可能短 ...

  4. PHP输入流 php://input 相关【转】

    为什么xml_rpc服务端读取数据都是通过file_get_contents(‘php://input', ‘r').而不是从$_POST中读取,正是因为xml_rpc数据规格是xml,它的Conte ...

  5. Week 3 结对编程

    Group: 杜正远 潘礼鹏 结对编程: 优点: 集体荣誉感.你们已经是一个集体了,一定得为对方着想负责. 1.看对方的代码,彼此会互相学习到一些奇妙的方法. 2.结对编程能把两个事情分开,降低复杂度 ...

  6. “数学口袋精灵”第二个Sprint计划(第九天)

    第九天进度 任务分配: 冯美欣:欢迎界面背景音乐发现bug(一开始进入游戏可以播放音乐,进入游戏界面,再返回欢迎界面时,音乐播放不出来),仍在解决中: 吴舒婷:改进ui与音效 1.进度条.金黄色: 2 ...

  7. octave基本指令4

    octave基本指令4 图形化显示数据 >> t=[0:0.01:0.98]; >> y1 = sin(2*pi*4*t); %pi表示π >> plot(t,y1 ...

  8. Alpha冲刺随笔集

    作业地址 项目名称:高校实验室信息化管理系统 团队成员 学号 姓名 031602636 许舒玲 031602237 吴杰婷 031602220 雷博浩 031602634 吴志鸿 181600107 ...

  9. Spring Framework: @RestController vs @Controller

    https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/bind/annota ...

  10. Vue 初识Vue

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...