在英文单词里面：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. CrackMe005-下篇 | 逆向破解分析 | 160个CrackMe（视频+图文）深度解析系列

    作者:逆向驿站微信公众号:逆向驿站知乎:逆向驿站 CrackMe005,上篇说了具体方法,下篇来发逆向分析过程,看看老夫是如何得到上篇的具体方法的! 准备 [环境和工具] win7/xp虚拟机环境 C ...

  2. 微信小程序开发工具 ubuntu linux版本

    安装 http://blog.csdn.net/zhangyingguangails/article/details/72517182 sudo apt install wine sudo git c ...

  3. part 1

    注意:本次源码分析选择2.0.3(因为不支持IE6.7.8,就少了很多兼容的hack的写法,对了解jQuery的实现原理有很大的帮助) 1.jQuery有不同的版本,从2.x版本便不再支持IE6.7. ...

  4. 最终版alpha阶段总结

    这是我们组最终的alpha阶段总结,我和陈汝婷虽然最后做的没有想象的好,时间也很紧急,但是真的学到很多,毕竟现在我们两个人做的活是其他组四个人做的活,其实能做到这样,哪怕这样,我们也觉得没有什么遗憾了 ...

  5. There are no enabled repos.

    今天要记录一下自己懵逼的一天,原来自己是Ubuntu系统,还以为是centos,导致命令错了 There are no enabled repos. Run "yum repolist al ...

  6. Activiti流程编辑器针对自定义用户角色表优化改造

    本文目的: 针对自定义的用户.角色表,对Activiti的在线流程设计器进行优化改造,使之能直接在图形界面上完成对节点办理人.候选人.候选组的配置,不需要先去查数据库中的用户ID.角色ID等信息再填入 ...

  7. Linux大页内存管理等---菜鸟初学

    1. 查看linux的内存情况: free -m 2. 查看是否开启大页的方法: cat /proc/meminfo |grep -i HugePage AnonHugePages: 276480 k ...

  8. const修饰符限定的常量

    类型前加const修饰符限定变量为只读,称为常量,定义时必须初始化,且初始化后编译器不允许再修改常量的值. 一.常量的定义 const在类型前面 const int value: //value是co ...

  9. Windows server 2008 r2下载地址和激活破解方法

    Windows 7发布了服务器版本——Windows Server 2008 R2.同2008年1月发布的Windows Server 2008相比,Windows Server 2008 R2继续提 ...

  10. Lodop打印控件里SET_PRINT_STYLE和SET_PRINT_STYLEA

    LODOP.SET_PRINT_STYLE 对该语句后面的打印项样式设置效果.LODOP.SET_PRINT_STYLEA 针对第一个参数设置的打印项样式设置效果.这两个语句,作用范围不同. 在设置字 ...