之所以被称为伪元素，是因为他们不是真正的页面元素，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. sppNet论文学习

    Spatial Pyramid Pooling in Deep Convolutional Networks for Visual Recognition 深度神经网络中用于视觉识别的空间金字塔池化 ...

  2. STL函数适配器

    一:适配器简介 C++中有三类适配器,分别是容器适配器,迭代器适配器和函数适配器,这里主要介绍函数适配器. (一)函数适配器简介 STL中已经定义了大量的函数对象,但是有时候需要对函数返回值进行进一步 ...

  3. maven项目如何从私服nexus中下载依赖包

    maven项目如何从私服nexus中下载依赖包   解决方法: 1.打开maven的config目录中settings.xml文件 2.在<profile></profiles> ...

  4. 代理IP爬取和验证（快代理&西刺代理）

    前言 仅仅伪装网页agent是不够的,你还需要一点新东西 今天主要讲解两个比较知名的国内免费IP代理网站:西刺代理&快代理,我们主要的目标是爬取其免费的高匿代理,这些IP有两大特点:免费,不稳 ...

  5. using 关键字有两个主要用途

    转自:https://www.jianshu.com/p/5357dc4efcf8 using 关键字有两个主要用途: (一).作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型. (二) ...

  6. linux下的进程通信之信号量semaphore

    概念: IPC 信号量和内核信号量非常相似,是内核信号量的用户态版本. 优点:每个IPC信号量可以保护一个或者多个信号量值的集合,而不像内核信号量一样只有一个值,这意味着同一个IPC资源可以保护多个独 ...

  7. Struts2中action接收中文参数为乱码解决方法

    老实说,中文乱码问题是每个程序员会经常遇到的问题,而且也是一个很头疼的问题.网上很多关于解决中文乱码的帖子,看几个之后你会发现大都是一样的.但是我们照着做,却还是无法解决乱码问题.我也是看了好多帖子, ...

  8. 解决电脑开机连不上网问题（Windows检测：远程计算机或设备将不接受连接）

    打开Google Chrome浏览器  -----> 设置 ------> 高级设置 -----> 打开代理设置 -----> 连接 -----> 局域网设置 ----& ...

  9. ElasticSearch总结

    转载自:https://www.cnblogs.com/WessonStar/p/8296781.html 不过我的es版本是7.2.0,然后这里要注意ik分词器放入plugins里是需要有个ik插件 ...

  10. WCF-初识DEMO

    类库 System.ServiceModle WCF类库 契约IUser1,实现User1 [ServiceContract] public interface IUser1 { [Operation ...