zoukankan      html  css  js  c++  java
  • 伪元素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>
  • 相关阅读:
    浅谈Semaphore类
    Python浅谈requests三方库
    191104
    191103
    191102
    191101
    191031
    191030
    191029
    191028
  • 原文地址:https://www.cnblogs.com/guniang/p/11936073.html
Copyright © 2011-2022 走看看