相同点

都可以用来表示伪类对象,用来设置对象前的内容
: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. 页面中<link>和<script>标签

    在html中,经常肯定会有js,css的引入 <head> <title>MyHtml</title> <link rel="stylesheet& ...

  2. 514 ,css不同选择器的权重(css层叠的规则)

    !important规则最重要,大于其它规则 行内样式规则,加1000 eg,<html>   <head>  </head>  <body>    & ...

  3. 条件锁condition与Queue()

    在学习之前你应该先了解锁和队列基础 import queue import time import random import threading import asyncio import logg ...

  4. Multisim 之逻辑转换仪

    1.逻辑转换仪的作用 已知逻辑电路图 1)根据逻辑电路图转换成逻辑表达式 2)化简逻辑表达式 3)列出真值表 已知真值表 1)根据真值表转化成逻辑表达式 2)根据逻辑表达式生成逻辑电路 2.如何在Mu ...

  5. Python 多任务(线程) day1

    多任务就是可以让一台电脑同时执行多个命令. 以前的单核cpu是怎么做到同时执行多个命令的?(时间片轮转) ——其实以前的单核CPU是让操作系统交替执行命令,每个任务执行0.01秒,这样看起来就像是在同 ...

  6. FromBase64String 输入的不是有效的 Base-64 字符串,因为它包含非 Base-64 字符、两个以上的填充字符,或者填充字符间包含非法字符

    js前台: <input id="upload_img_input" v-on:change="onFileChange" type="file ...

  7. HTML5学习(7)多媒体元素

    视频元素video <video src="./media/xxx.mp4" controls autoplay muted loop></video> 音 ...

  8. 67课 for循环1-为什么需要for循环

    # include <stdio.h> int main (void) { int i; ;.//sum代表和的意思 ; i<=; ++i)//第八行代码 sum = sum + i ...

  9. 隐藏pyqt中调用matplotlib图片中的工具栏

    方法: # pyqtgraph使用matplotlib import pyqtgraph.widgets.MatplotlibWidget as mw a_plt = mw.MatplotlibWid ...

  10. ora 01704 字符串文字太长

    分析sql执行失败的原因,在于没有强制指定插入字符串为clob类型,解析sql时,oracle会把插入的字符串作为 “字符串类型”处理,由于oracle有最大字符串限制(不超过4000个字符),所以会 ...