CSS之before, after伪元素特性表现两则

一、特性表现one: 不能左右:empty伪类

CSS3选择器中有个:empty伪类，表示当元素里面什么都没有的时候（包括空格、标签内换行），应用相关样式。在现代web网页开发制作中，非常常用也非常方便。

例如，某元素类名是.box, 如下HTML和CSS:

div class="box">
    /div>

.box {
     background-color: #cd0000;
 }
 .box:empty {
     background-color: #fae6e6;
 }
    

因为.box里面是空大屁，所以，呈现的背景色就会是下面这样子：

假如.box里面有空格，或是文字，或是标签之类：

div class="box">
    我是文字/div>

则，:empty失效，于是，呈现的是靓丽的红色：

下面，高能来了，请问，如果我们使用before或after伪元素在.box里面生成内容，:empty伪类还有作用吗？

这个问题动动脚趾头想想都知道:empty伪类依然是起作用的………………才™怪呢！你的脚趾头是长脑袋上的吧！这么有学问的问题，咱就不要想当然yy了，写个简易Demo，实践一下，自然出真知！

乖，请狠狠地点击这里：:empty伪类和before/after伪元素Demo

前面3个框框是让你熟悉:empty伪类的，咱们目光直接落到第四个方块，里面的文字就是伪元素生成的：

.pseudo::after {
     content: '伪元素生成内容';
 }

结果，所有现代浏览器下面，依然是娘炮红背景色，截图如下：

此表现说明，空元素内部使用伪元素生成的内容，是不被:empty伪类认可的，选择器依然认为这是个空元素。

其实呢，我们马后炮一下，::before, ::after的名称其实就出卖了自己，对吧，我们平常都在呢么称呼的？“伪元素”啊，其中大大的的“伪”字就表明跟一般的元素不一样。

这不，这里被:empty伪类给排挤了。

二、特性表现two: content动态呈现值无法获取

对伪元素熟悉的同学应该都知道，content内容动态生成技术可以动态显示各种内容，包括属性值、计数器等，但是，你可能不知道的是，我们目前压根没有办法获得这些最终具体呈现的content内容，为什么呢？因为我们是飞天小女警，我呸~不对，因为我们是伪元素。

首先，为避免歧义，我有必要解释清楚，我们不是没法获得CSS中content的属性值，而是没法获得页面上content最终呈现的内容值。有啥区别呢，举个例子大家应该就清楚了！

您可以狠狠地点击这里：CSS伪类计数器动态获得选中元素个数Demo

上面这个Demo是去年“CSS计数器+伪类实现数值动态计算与呈现”一文中使用过的Demo，对，就是同一个。

使用纯CSS动态显示你当前选择了几项内容：

伪元素相关CSS如下：

.total::after {
       content: counter(icecream);
 }
    

很简单的CSS，伪元素，内容显示的是icecream这个计数器当前的值？

高能再次来临，如果让你获得.total这个元素目前呈现的数值数目(比方说上面截图显示的3)，你怎么获取？

告诉你，你妄图想通过.total这个元素获得这个动态数值3难于上青天！

以前介绍过window.getComputedStyle方法，可以获得伪元素的计算样式。但是，抱歉，得到的只是纯粹的content在CSS文件中的属性值，例如这里：

VAR dom = document.querySelector(".total"), window.getComputedStyle(dom , "::after").content;
       // 结果是："counter(icecream)"

结果是”counter(icecream)”，而不是数值3。为啥子没法获取呢？我们继续马后炮一下，因为是“伪元素”，不是元素。哈哈，这个解释好像有点敷衍，我特意去规范文档看了一圈，没找到很明确的解释。不过网上有说法是因为before, after不属于正常DOM树节点，因此，就没法得到动态呈现内容。

三、结束语

关于以上before, after伪元素两个解释，还望对规范对标准有过研究的同行指点下，也就是从根本上解释下原因。

好了，本文的内容就这些，欢迎交流，欢迎反馈。行为仓促，错误难免，欢迎纠正，感谢阅读！

（本篇完）

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！