之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但所有的用法和表现行为和真正的页面元素是一样的，可以对其使用诸如页面元素一样的css样式，
表面上看上去貌似页面的谋些元素，实际上是css展现行为，因此被称为伪元素，

伪元素添加的内容默认是inline元素，表示伪元素的内容必须设置content属性，否则不生效

类选择 伪类选择器 就是选区对象

伪元素选择器本质上就是插入一个元素（）

演示例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        div {

            width: 296px;

            height: 180px;

            margin: 100px auto;

            position: relative;

        }

        div:hover::before {  /*鼠标经过之后插入一个伪元素*/

            content: "";

            width: 100%;

            height: 100%;

            border: 10px solid rgba(255,255,255, .3);

            display: block;

            position: absolute;

            top: 0;

            left: 0;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div>

        <img src="data:image/mi.jpg" alt="">

    </div>

</body>

</html>

伪元素before和after本质的更多相关文章

  1. css学习_css伪元素的本质

    1.伪元素的本质(插入了一个元素(行内元素/标签/盒子) 案例1: 案例2:

  2. CSS3与页面布局学习总结（六）——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3在CSS2.1的基础上新增加了许多属性,这里选择了较常用的一些功能与大家分享,帮助文档中有很详细的描述,可以在本文的示例中获得帮助文档. 一.阴影 1.1.文字阴影 text-shadow&l ...

  3. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  4. CSS3新特性（阴影、动画、渐变、变形、伪元素等）

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  5. CSS3新特性（阴影、动画、渐变、变形、伪元素等） CSS3与页面布局学习总结——CSS3新特性（阴影、动画、渐变、变形、伪元素等）

      目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原点 三.伪元素 3.1.before 3.2.after 3.3.清除浮动 四.圆角与边 ...

  6. CSS中的伪类与伪元素

    在前端开发中,大家或多或少的有接触过CSS伪类和伪元素,使用伪元素的时候,总感觉和伪类很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢? 在 W3C 中定义: 伪类:用于向某 ...

  7. CSS3伪类和伪元素的特性和区别尤其是 ::after和::before

    伪类和伪元素的理解 官方解释: 伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态(LVHA).随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“ ...

  8. css中伪类和伪元素的区别

    转载:http://www.cnblogs.com/ihardcoder/p/5294927.html CSS3伪类和伪元素的特性和区别   前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常 ...

  9. CSS 类、伪类和伪元素差别具体解释

    CSS中的类(class)是为了方便过滤(即选择)元素,以给这类元素加入样式,class是定义在HTML文档树中的. 可是这在一些情况下是不够用的,比方用户的交互动作(悬停.激活等)会导致元素状态发生 ...

随机推荐

  1. ISO/IEC 9899:2011 条款6.2.3——标识符的名字空间

    6.2.3 标识符的名字空间 1.如果一个特定标识符的多个声明在一个翻译单元的任意一点可见,那么语法上下文会区分对不同实体的引用.从而,对于标识符各种不同的类别具有独立的名字空间: ——标签名(通过标 ...

  2. React之概述(待续)

    原文链接 MDN上有关JavaScript的内容 箭头函数, 类, 模板字符串, let, const Babel REPL

  3. java实现https免证书认证

    java实现https免证书认证   解决方法: 1.下载两个包,httpclient-4.2.jar和httpcore-4.2.jar,复制以下代码就可使用. 2.调用类代码: String htt ...

  4. Linux下开发常用配置

    JDK /etc/profile export JAVA_HOME=/usr/local/jdk1.8.0_181export CLASSPATH=.:$JAVA_HOME/jre/lib/rt.ja ...

  5. Python3之多重继承

    继承是面向对象编程的一个重要的方式,因为通过继承,子类就可以扩展父类的功能. Animal类层次的设计,假设我们要实现以下4中动物 Dog-狗狗 Bat-蝙蝠 Parrot-鹦鹉 Ostrich-鸵鸟 ...

  6. Egret入门学习日记 --- 问题汇总

    问题1: 图片无法拖入到 EXML 文件的问题 在日记 第六篇 有记载:https://www.cnblogs.com/dmc-nero/p/11188975.html 位于 3.6节 内容. 问题2 ...

  7. golang web框架 beego 学习 （六） request body和module的映射

    router.go package routers import ( "gowebProject/controllers" "github.com/astaxie/bee ...

  8. 最新 新浪java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.新浪等10家互联网公司的校招Offer,因为某些自身原因最终选择了新浪.6.7月主要是做系统复习.项目复盘.LeetCode ...

  9. python线程互斥锁Lock（29）

    在前一篇文章 python线程创建和传参 中我们介绍了关于python线程的一些简单函数使用和线程的参数传递,使用多线程可以同时执行多个任务,提高开发效率,但是在实际开发中往往我们会碰到线程同步问题, ...

  10. 99%的人都理解错了GET与POST的区别

    原文链接:https://mp.weixin.qq.com/s?__biz=MzI3NzIzMzg3Mw==&mid=100000054&idx=1&sn=71f6c214f3 ...