css伪元素详解

布满荆棘的人生 2022-05-14 05:21 274阅读 0赞

一.什么是伪元素；

css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。

二.after与before这两个伪元素；

这个两个伪元素在真正页面元素内部之前和之后添加新内容（当然了，可以对伪元素应用定位可以置于任何位置）。可以用以下例子来说明：

<p>hello world</p>
    
        <style>
    
            p:before{content: "this is inserted before hello world! "}
    
            p:after{content: "this is inserted after hello world"}
    
        </style>

上面例子等价于下面的html结构：

<p>
    
            <span>this is inserted before hello world!</span>
    
            hello world
    
            <span> this is inserted after hello world</span>
    
        </p>

由此可知：伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,**设置:before和:after时必须设置其content属性，否则伪元素就不起作用**。那么问题来了，content属性的值可以有哪些内容呢，具体有以下几种情况：

（1）字符串，原样输出

（2）属性，属性名

（3）URL，引用外部资源

（4）counter（）。

三。before：：和after：：的特点：

\* 伪元素不属于文档，所以js无法操作它

\* 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

\* 原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。