css伪元素详解

一.什么是伪元素;

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可替换元素,因为其外观和尺寸有外部资源决定,那么如果外部资源正确加载,就会替换掉其内部内容,这时伪元素也会被替换掉,但是当外部资源加载失败时,设置的伪元素是可以起作用的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值