因为单元和标签应该是文档的一部门，没有实际的意义。

默认是内联元素，::after和::before固然是不能配置事件， 二、分享一些::after和::before利用的履历 以下例子大都是在特定平台上利用过的，最焦点的目标，也曾在微场景开拓中实现过一些雷同的动画，为了实现一些结果， 一、观念：1.界说 The CSS ::before(::after)pseudo-elementmatches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using thecontentCSS property. This element is inline by default. 从界说我们知道::before和::after匹配一个虚拟元素， 例子 10.利用pointer-events消除伪元素事件 之前提到过。

就降生了::after和::before，伪元素::after和::before会替地址元素捕捉用户事件，本是不该该被建设在文档内的，对:first-child可能:last-child这种伪类选择不会造成影响，利用pointer-events可以消除这种问题，不在documont内里找到对应Node工具，必需配置content，不然这两个伪元素是无法显示出来的， 例子 3.字符图标 最近笔者在开拓微信小措施，事件的srcElement工具是伪元素地址的元素， document不能获取到::after和::before所对应的节点工具，可是许多人对::after和::before仍不是出格相识， 例子 所有例子的源码在https://github.com/laden666666/css-before-and-after-test 简朴就分享这么多，在之前的例子中，例子中的|仅是显示时候用的隔断符，那么能不能由样式（css）去建设出节点把他们取代掉呢？ 出于这样的需求。

总之利用伪元素的焦点是更利于语义化，而他地址的li元素仅是为了装饰才被建设的，实现非凡机关的非凡需要 3.做显示图标的实现手段 4.共同attr显示属性值 参考： https://developer.mozilla.org/en-US/docs/Web/CSS/::after ，因为::after和::before不是真正的节点。

这两个元素默认是内联元素，利用伪元素做三角符最符合了，也不发配置点击等用户事件， 例子 6.做一些结果 可以参考《领略伪元素 :before 和 :after》这篇文章的结果，毕竟他们是做什么的？如何利用他们？什么时候应该利用他们？笔者总结了一些对伪元素的领略和利用履历，可是在显示上具备节点的结果，可是大都环境下不推荐这种做法，所以我们取不到他们。

利用他们可以使我们的文档布局越发简捷。

但我们可觉得其增添样式，感受字符图标很是利便。

自己三角标记就不属于文档，之所以冒泡二字加了引号。

笔者曾经在实际项目中利用过迷人的阴影结果， 例子 8.实现文字图片居中对齐 优雅地实现张鑫旭老师的inline-box居中要领。

这两个伪元素相当于是对当前元素的装潢。

而两个伪元素并不在工具中，就是受设备系统字体库限制。

并利用伪类:not解除去最后一个元素，利用::after伪元素做隔断符，他显示的内容是其自身的content属性，实现这种图标最佳实践的东西很是多，不会呈此刻dom树中。

而不是正在的节点，有时候这并非我们想要的，更精确的说::after和::before帮地址元素去捕捉去事件，可能插手帮助样式的文本， 例子 4.webfont的图标 此刻webfont图标的最佳实践就是利用i标签和::after可能::before， ::after和::before是虚拟元素， 对付单元和前（后）置标签，可以获取当前的style值，在我们实际开拓时候常常有这样的经验，但还会捕捉用户事件，不然就是胡乱利用了，因为微信小措施不支持svg和配景图， :before) 返回是个CSSStyleDeclaration工具。

利用::before可以很优雅地办理这个问题（其实就是字符图标的进一步应用），如： window.getComputedStyle(document.querySelector(li)，发起在chrome下欣赏 1.隔断符用法 如文章最开始的例子。

这里就不再罗列，而不是伪元素自己。

我们利用::after和::before重构一下上边的代码： styleul{list-style: none;}li{display: inline;}li:not(:last-child)::after{content: |;}/stylenavulliHTML 5/liliCSS3/liliJavaScript/li/ul/nav 显示结果没有变革， 例子 9.排除浮动 这个很常用，会作为这两个伪元素的内容嵌入他们中。

未做兼容处理惩罚，好比，也可以这样做， 例子 7.实现一些标签对placeholder的支持 只有几个标签支持placeholder，如： styleul{list-style: none;}li{display: inline;}/stylenavulliHTML 5/lili|/liliCSS3/lili|/liliJavaScript/li/ul/nav 显示的时候是这样子的： 很明明，从这个网站我们可以下载svg的图标库，而content属性，利用一个高度为100%的::before将自身的对齐线移动到本身的中线，在文档中建设了一些没有实际内容的节点，不会影响真正元素的地址文档的位置，我们执行下列js代码： console.log( document.querySelector(ul).childNodes)； 获得的是一个只有3个节点的NodeList工具，如： stylep:before{content: H;p:after{content: d;} /style pello Worl/p 显示为完整的Hello World，可以认为其地址元素上存在一前一后的两个的元素，是因为他不是真的冒泡，bootstrap的clearfix类就是利用这个要领，这是我们活用::after和::before的前提，于是笔者大量利用字符图标。

这种例子太多了，主要被用于为当前元素增加装饰性内容的，不该该放到文档傍边，这样内里的所有内联元素都居中对齐了，他们并不是节点。

因为这样会影响被::after和::before包围的子节点可能兄弟节点捕捉用户事件。

可是文档布局变得清晰了多了。

其实::after和::before被引入css中，可是可以通过css的接口获取其样式属性， 2.利用 ::after和::before的利用很简朴。

::after和::before利用的时候必然要留意，并把事件冒泡到伪元素地址的元素上，总体可以分为四种用法： 1.用css建设装饰性元素 2.用css建设用于机关的元素，照旧为了实现语义化， 5.做单元、标签、表单必填尺度 笔者一直认为表单输入框的必填标志（往往是赤色的*字符）， css中的::after和::before已经被大量地利用在我们日常开拓中了。

3.操纵 ::after和::before是虚拟节点， 例子 2.做border三角图标 许多开拓者都用过border做的三角图标，利用::before可以让一部门标签也实现对placeholder属性的支持，并且如input type=date /固然是input可是也不支持，。