在英文单词里面：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. 基于RC4加密算法的图像加密

    基于RC4加密算法的图像加密 某课程的一个大作业内容,对图像加密.项目地址:https://gitee.com/jerry323/RC4_picture 这里使用的是RC4(流.对称)加密算法,算法流 ...

  2. ansible一键部署k8s单机环境

    一.虚拟机准备 干净的Centsot7.4.4G内存.2个CPU 最小化安装,最好带虚拟化 二.执行初始化脚本 注意:脚本中配置静态网卡根据实际网卡名称配置,我用的是ens33 可以用 sed -i ...

  3. shell+curl监控网站页面(域名访问状态)，并利用sendemail发送邮件

    应领导要求,对公司几个主要站点的域名访问情况进行监控.下面分享一个监控脚本,并利用sendemail进行邮件发送. 监控脚本如下:下面是写了一个多线程的网站状态检测脚本,直接从文件中读出站点地址,然后 ...

  4. 201306114357-实验3-C语言

    #include<stdio.h>#include <stdlib.h>#include <time.h>main(){ int a,b,c,n,u,i,sum;  ...

  5. org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing XML document from class path resource [applicationContext.xml]; nested exception is java.io.FileNotFoundException: c

    //这个是 配置文件放错了地方 org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsing ...

  6. realm vs. domain

    从wiki的角度:https://wikidiff.com/domain/realm domain是物理的,realm是抽象的,都是领域. domain是一个人或组织拥有或控制的地理区域,而realm ...

  7. 传输层中的协议 TCP & UDP

    面向连接的TCP协议 “面向连接”就是在正式通信前必须要与对方建立起连接.比如你给别人打电话,必须等线路接通了.对方拿起话筒才能相互通话.TCP(Transmission Control Protoc ...

  8. Vue 初识Vue

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

  9. MidoNet 安装（Kilo RDO）（最老版）

    一.初始化(Kilo RDO)版(最老版) 环境介绍 系统 CentOS 7.3 主机ip 10.211.55.5 主机名 midonet 1.配置yum源 ###OpenStack源 yum ins ...

  10. awk、sed、grep三大shell文本处理工具之sed的应用

    sed 流编辑器 对文本中的行,逐行处理 非交互式的编辑器 是一个编辑器 1.工作流程 1)将文件的第一行读入到自己的缓存空间(模式空间--pattern space),删除掉换行符 2)匹配,看一下 ...