之所以被称为伪元素，是因为他们不是真正的页面元素，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. python线程池（转）

    ThreadPool: #! /usr/bin/env python # -*- coding: utf-8 -*- import threadpool import time def sayhell ...

  2. webSphere 部署项目时，访问报错：Error 500: javax.servlet.ServletException: SRVE0207E: Uncaught initialization exception created by servlet【我】

    前提: 一个普通maven项目,在本地用Tomcat运行没有任何问题,但是放到 webSphere  测试环境上,访问时就报如下错误: Error 500: javax.servlet.Servlet ...

  3. Sass(Syntactically Awesome Stylesheets)——概述（待续）

    官网地址:http://sass.bootcss.com/ Sass(Syntactically Awesome Stylesheets) Sass 是成熟.稳定.强大的 CSS 扩展语言. 特征 兼 ...

  4. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_06-SpringSecurityOauth2研究-Oauth2授权码模式-申请令牌

    3.3 Oauth2授权码模式 3.3.1 Oauth2授权模式 Oauth2有以下授权模式: 授权码模式(Authorization Code) 隐式授权模式(Implicit) 密码模式(Reso ...

  5. 利用Python获取cookie的方法,相比java代码简便不少

    1.通过urllib库,是python的标准库,不需要另外引入,直接看代码,注意代码的缩进: # coding=UTF-8import cookielibimport urllib2 class Ry ...

  6. PAT 甲级 1047 Student List for Course (25 分)（cout超时,string scanf printf注意点,字符串哈希反哈希）

    1047 Student List for Course (25 分)   Zhejiang University has 40,000 students and provides 2,500 cou ...

  7. LeetCode_38. Count and Say

    38. Count and Say Easy The count-and-say sequence is the sequence of integers with the first five te ...

  8. iOS-系统bool理解

    typedef signed char BOOL; #if !defined(YES)    #define YES (BOOL)1 #endif #if !defined(NO)    #defin ...

  9. Direct2D 学习笔记（2）画刷 Brush

    画刷的使用方法 需要包含的文件:<wincodec.h> 需要包含的库: "windowscodecs.lib" 资源网址:    https://docs.micro ...

  10. 基于Spring Boot的可直接运行的分布式ID生成器的实现以及SnowFlake算法详解

    背景 最近对snowflake比较感兴趣,就看了一些分布式唯一ID生成器(发号器)的开源项目的源码,例如百度的uid-generator,美团的leaf.大致看了一遍后感觉uid-generator代 ...