在英文单词里面：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. 天气提醒邮件服务器（python + scrapy + yagmail）

    天气提醒邮件服务器(python + scrapy + yagmail) 项目地址: https://gitee.com/jerry323/weatherReporter 前段时间因为xxx上班有时候 ...

  2. CentOS7下安装Docker-Compose操作记录

    Docker-Compose是一个部署多个容器的简单但是非常必要的工具.安装Docker-Compose之前,请先安装 python-pip 一.安装 python-pip [root@workben ...

  3. 基于Ping和Telnet/NC的监控脚本案例分析

    案例一:单纯地对某些ip进行ping监控 [root@test opt]# cat /opt/hosts_ip_list 192.168.10.10 192.168.10.11 192.168.10. ...

  4. phpcms全站搜索

    这篇博客已经移至http://www.cnblogs.com/nuanai/p/8028562.html中~~~~~~

  5. 微信小程序动态数据跑马灯组件编写

    开发必备:熟悉微信小程序组件开发 开发思路:如果只有一条数据,直接用css3关键帧动画:如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态.数组 ...

  6. MapReduce 过程详解

    Hadoop 越来越火, 围绕Hadoop的子项目更是增长迅速, 光Apache官网上列出来的就十几个, 但是万变不离其宗, 大部分项目都是基于Hadoop common MapReduce 更是核心 ...

  7. vue的自定义组件和组件传值

    <div id="app"> <div>{{pmessage}}</div> //父组件 <child :message="pm ...

  8. win8和win7下解决php5.3和5.4、5.5等不能加载php_curl.dll的终极解决办法 收藏

    win8和win7下解决php5.3和5.4.5.5等不能加载php_curl.dll的终极解决办法 收藏2015年01月11日 最近分别在WIN7和Windows8 上分别安装php 高版本!都遇到 ...

  9. Oracle 控制文件管理

    控制文件是一个很小的二进制文件(10MB左右),含有数据库结构信息,包括数据文件和日志文件信息.控制文件在数据库创建时被自动创建,并在数据库发生物理变数时更新.控制文件被不断更新,在任何时候都要保证控 ...

  10. C++与C的区别

    在最开始C++只是C加上了一些面向对象的特性,C++最初的名字为C with Classes.后来C++又提出了一些不同于Class的特性:Exceptions(异常).templates(模板).S ...