伪元素before和after本质 

之所以被称为伪元素，是因为他们不是真正的页面元素，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="image/mi.jpg" alt="">
    </div>
</body>
</html>

 

posted @ 2019-11-26 15:50  ivy_wang  阅读(205)  评论(0)  编辑  收藏  举报