在英文单词里面：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. 对于VS软件的个人评价

    因为还是一个菜鸟,对于VS这样的大软件还只能是自己个人的理解,以前用的是VC++,后来因为电脑系统更新,开始接触了VS,个人觉得还是vs2010更好用一些,作为一款windows平台应用程序的集成开发 ...

  2. 四则运算coding

    https://coding.net/u/ztf1641429293/p/sizeyunshuan/git/blob/master/Sizenyunsuan.java

  3. 2-Twenty Second Scrum Meeting-20151222

    任务安排 成员 今日完成 明日任务 闫昊 服务器关闭,开发停滞……  …… 唐彬 服务器关闭,开发停滞……  …… 史烨轩  服务器关闭,开发停滞……  …… 余帆   路径保存 路径整合 金哉仁   ...

  4. 【实践报告】Linux实践三

    Linux实践——程序破解 一.掌握NOP.JNE.JE.JMP.CMP汇编指令的机器码 NOP:NOP指令即“空指令”.执行到NOP指令时,CPU什么也不做,仅仅当做一个指令执行过去并继续执行NOP ...

  5. 20135316王剑桥Linux内核学习记笔记第七周

    20135316王剑桥<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 一.可执行程序是怎么得来的? 编译 ...

  6. checkbox未选中不提交数据

    如果checkbox为选中的话提交的数据为NULL function checkForm() { alert(($("#checkbox").get(0).checked)); i ...

  7. Python学习笔记 -- 第一章

    本笔记参考廖雪峰的Python教程 简介 Python是一种计算机高级程序设计语言. 用Python可以做什么? 可以做日常任务,比如自动备份你的MP3:可以做网站,很多著名的网站包括YouTube就 ...

  8. 申港集中运营平台Linux测试环境架构搭建

    架构图 服务一览 ESB安装 ESB全称为Enterprise Service Bus,即企业服务总线.ESB提供了网络中最基本的连接中枢,是构筑企业神经系统的必要元素.ESB的出现改变了传统的软件架 ...

  9. CI框架2.x的验证码中所遇问题解决

    用php版本是5.6,CI框架版本是2.x,在使用验证码(captcha)时,遇到一些问题. 首先,我查看框架手册,说必需的两个参数是"img_url",“img_path”,其他 ...

  10. Qt__主窗口、菜单和工具条(QMainWindow,QMenu,QToolBar)

    转自豆子空间 主窗口 Qt的GUI程序有一个常用的顶层窗口,叫做MainWindow.MainWindow继承自QMainWindow.QMainWindow窗口分成几个主要的区域: 最上面是Wind ...