伪元素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编辑  收藏  举报