相同点

都可以用来表示伪类对象,用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的
不同点

:before/:after是Css2的写法,::before/::after是Css3的写法
:before/:after 的兼容性要比::before/::after好 ,
不过在H5开发中建议使用::before/::after比较好
注意

这些伪元素 要配合content属性一起使用
这些伪元素 不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
这些伪元素 的特效通常要使用:hover伪类样式来激活
eg:当鼠标移在span上时,span前插入”111111”

<style>
span{
background: yellow;
}
span:hover::before{
content:"111111";
}
</style>

<span>222</span>

:after/::after和:before/::before的异同的更多相关文章

  1. Java 堆内存与栈内存异同(Java Heap Memory vs Stack Memory Difference)

    --reference Java Heap Memory vs Stack Memory Difference 在数据结构中,堆和栈可以说是两种最基础的数据结构,而Java中的栈内存空间和堆内存空间有 ...

  2. Atitit 会话层和表示层的异同

    Atitit 会话层和表示层的异同 会话层 这一层也称为会晤层或对话层.在会话层及以上的更高层次中,数据传送的单位没有另外再取名字,一般都可称为报文. 会话层虽然不参与具体的数据传输,但它却对数据传输 ...

  3. Linux知识:/root/.bashrc与/etc/profile的异同

    Linux知识:/root/.bashrc与/etc/profile的异同 要搞清bashrc与profile的区别,首先要弄明白什么是交互式shell和非交互式shell,什么是login shel ...

  4. Shell 编程基础之 [ 与 [[ 的异同

    一.简介 [ 与 test 等价,是 bash 的内部命令,GNU/linux 系统的 coreutils 软件包通常带 /usr/bin/test 和 /usr/bin/[ 命令.如果我们不用绝对路 ...

  5. php empty,isset,is_null比较(差异与异同)

    php empty,isset,is_null比较(差异与异同)  http://www.cnblogs.com/chengmo/archive/2010/10/18/1854258.html

  6. truncate,delete,drop的异同点

    说明:本文摘自oracle技术用户讨论组 truncate,delete,drop的异同点  注意:这里说的delete是指不带where子句的delete语句    相同点:truncate和不带w ...

  7. 关于RPC与MQ异同的理解

    最近看了一些资料,回顾过去项目的经验,梳理自己对两者异同的理解: 相同: 1.都利于大型系统的解耦: 2.都提供子系统之间的交互,特别是异构子系统(如java\node等不同开发语言): 不同: 1. ...

  8. OC 类方法,对象方法,构造方法以及instancetype和id的异同

    OC 类方法,对象方法,构造方法以及instancetype和id的异同 类方法: 类方法是可以直接使用类的引用,不需要实例化就可以直接使用的方法.一般写一些工具方法. 类方法: 声明和实现的时候,以 ...

  9. java中的this和super的作用和异同和C++中调用父类的构造函数

    来源于:http://www.cnblogs.com/hasse/p/5023392.html 这几天看到类在继承时会用到this和super,这里就做了一点总结,与各位共同交流,有错误请各位指正~ ...

  10. 图解call、apply、bind的异同及各种实战应用演示

    一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...

随机推荐

  1. 题解【洛谷P1514】[NOIP2010]引水入城

    题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个 \(N\) 行 \(M\) 列的矩形,如上图所示,其中每个格子都代表一座城市,每座城市 ...

  2. 【C语言】请输入一个n(n<=10)并输出一个n行n列的杨辉三角

    应用二维数组的知识 杨辉三角特点: 1.第一列和对角线的元素全部为1 2.其他元素等于上一行的当前列的值和上一行中当前列前边一列的值之和 #include<stdio.h> #define ...

  3. codeforces 1245D(最小生成树)

    题面链接:https://codeforces.com/problemset/problem/1245/D 题意大概是给你一些城市的坐标,可以在城市中建立发电站,也可以让某个城市和已经建好发电站的城市 ...

  4. Reinforcement Learning,微信公众号:DRL学习

    欢迎大家关注微信公众号:DRL学习,我们一起来学习强化学习和深度强化学习的算法及现状应用问题. 强化学习简单说就是学习如何最大化未来奖励的预期总和,以及agent学会在环境中做出的行动序列,其中随机状 ...

  5. AcWing 870. 约数个数

    #include <iostream> #include <algorithm> #include <unordered_map> #include <vec ...

  6. k8s默认存储动态挂载分配配置

    k8s默认存储动态挂载分配配置 k8s默认存储动态挂载分配配置 https://blog.csdn.net/BigData_Mining/article/details/96973871

  7. 网页域名在QQ内被多人投诉举报拦截的解决方案

    背景 相信大家经常会遇到一个头疼的问题就是,明明自己的网页没有违规内容(比如线下活动的推广),但链接在QQ内转发分享会被QQ管家拦截,导致用户无法访问. 那么当大家遇到这个问题的时候应该怎么办呢?不用 ...

  8. Spring bean继承

    Bean 定义继承 bean 定义可以包含很多的配置信息,包括构造函数的参数,属性值,容器的具体信息例如初始化方法,静态工厂方法名,等等. 子 bean 的定义继承父定义的配置数据.子定义可以根据需要 ...

  9. Day3 集合

    数组与集合的区别 数组可以看作是一种集合,但是数组初始化后大小不可变:数组只能按索引顺序存取. https://www.cnblogs.com/tiandi/p/10641773.html Java标 ...

  10. nginx.conf nginx反向代理配置文件

    nginx反向代理配置文件 nginx.conf proxy_default.conf proxy.conf vhost/*.conf upstream/*.conf cache/*.conf ngi ...