之所以被称为伪元素，是因为他们不是真正的页面元素，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. 一台java服务器可以跑多少个线程？

    一台java服务器能跑多少个线程?这个问题来自一次线上报警如下图,超过了我们的配置阈值.   京东自研UMP监控分析 打出jstack文件,通过IBM Thread and Monitor Dump ...

  2. 机器学习 - 算法 - SVM 支持向量机

    SVM 原理引入 支持向量机( SVM,Support Vector Machine ) 背景 2012年前较为火热, 但是在12年后被神经网络逼宫, 由于应用场景以及应用算法的不同, SVM还是需要 ...

  3. Qt编写自定义控件45-柱状标尺控件

    一.前言 这个控件写了很久了,是最早期的一批控件中的一个,和温度计控件类似,都是垂直的进度条,可以设置不同的背景颜色,左侧的刻度也可以自由设定,还提供了动画效果,其实就是开启定时器慢慢的进度到设定的目 ...

  4. poi导出excel2007版本

    /** * 导出excel2007版本 * * @param titles * 表头集合 * @param sheetNames * sheet名称 * @param datas * 数据集合 * @ ...

  5. Linux (Ubuntu)安装ssh

    看ssh服务是否启动 打开"终端窗口",输入sudo ps -e |grep ssh 回车有sshd,说明ssh服务已经启动, 如果没有启动,输入sudo service ssh ...

  6. mysql的root用户无法给普通用户授权问题处理

    1.查看Grant_priv是Y还是N 执行下面 select * from mysql.user where User='root' and Host='%'\G; 下图查看结果为Grant_pri ...

  7. css+html 实现 光晕 光圈

    <style> html { height: 100%;}body { height: 100%; background-color: #000; margin: 0; padding: ...

  8. el-table中通过renderHeader方法为表头添加hover等效果

    在我们的日常工作中有时候需要为element表格的表头进行自定义操作.在element官网中也有提到renderHeader方法.但是并未给出具体实现方法.现在具体说一下. 在element官网(ht ...

  9. uwp,右键浮出获取DataContext(数据上下文)

    列表视图类控件,如ListView/GridView,有时项目需要按下右键浮出选项,来获取Item的DataContext. 下面的示例代码,事先我已经有了一个自定义类Video,并且已经绑定了数据源 ...

  10. springboot集成elk 二：springboot + elk 采集日志

    到logstash-2.0.0\bin下新建文件 logstash.conf input { tcp { mode => "server" host => " ...