::after and ::before in css have been widely used in our daily development, using them can make our document structure more concise. But many people still don't know much about ::after and ::before. What exactly do they do? How to use them? When should they be used? The author summarizes some understanding and experience of using pseudo-elements.
1. Concept:
1. Definition
The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.
From the definition we know that ::before and ::after match a virtual element and are mainly used to add decorative content to the current element. The content he displays is its own " content" attribute, which is an inline element by default.
In fact, ::after and ::before were introduced into css, and the core purpose is to achieve semantics. In our actual development, we often have such experience. In order to achieve some effects, we create some nodes without actual content in the document, or add auxiliary style text, such as:
<style> ul{ list-style: none; } li{ display: inline; } </style> <nav> <ul> <li>HTML 5</li> <li>|</li> <li>CSS3</li> <li>|</li> <li>JavaScript</li> </ul> </nav>
It looks like this when displayed:
Obviously, the "|" in the example is only a spacer used for display, and has no practical significance, and the li element where it is located is only created for decoration, and should not be created in the document. So can the styles (css) be used to create nodes and replace them?
Out of this demand, ::after and ::before were born. These two pseudo-elements are equivalent to the decoration of the current element. They are not nodes and will not appear in the dom tree, but they have nodes on the display. Effect. Let's refactor the above code using ::after and ::before:
<style> ul{ list-style: none; } li{ display: inline; } li:not(:last-child)::after{ content: "|"; } </style> <nav> <ul> <li>HTML 5</li> <li>CSS3</li> <li>JavaScript</li> </ul> </nav>
显示效果没有变化，但是文档结构变得清晰了多了。
2.使用
::after和::before的使用很简单，可以认为其所在元素上存在一前一后的两个的元素，这两个元素默认是内联元素，但我们可以为其增添样式。::after和::before使用的时候一定要注意，必须设置content，否则这两个伪元素是无法显示出来的。而content属性，会作为这两个伪元素的内容嵌入他们中。如：
<style> p:before{ content: "H"; p:after{ content: "d"; } </style> <p>ello Worl</p>
显示为完整的Hello World。
::after和::before是虚拟元素，不会影响真正元素的所在文档的位置，对:first-child或者:last-child这种伪类选择不会造成影响。
3.操作
::after和::before是虚拟节点，而不是正在的节点，不在documont里面找到对应Node对象，在之前的例子中，我们执行下列js代码：
console.log( document.querySelector("ul").childNodes)；
得到的是一个只有3个节点的NodeList对象，而两个伪元素并不在对象中。因为::after和::before不是真正的节点，所以我们取不到他们，也不发设置点击等用户事件。::after和::before虽然是不能设置事件，但还会捕获用户事件，并把事件“冒泡”到伪元素所在的元素上。之所以“冒泡”二字加了引号，是因为他不是真的冒泡，更准确的说::after和::before帮所在元素去捕获去事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身。
document不能获取到::after和::before所对应的节点对象，但是可以通过css的接口获取其样式属性，如：
window.getComputedStyle(
document.querySelector('li'), ':before'
)
返回是个CSSStyleDeclaration对象，可以获取当前的style值。
二、分享一些::after和::before使用的经验
以下例子多数是在特定平台上使用过的，未做兼容处理，建议在chrome下浏览
1.间隔符用法
如文章最开始的例子，使用::after伪元素做间隔符，并使用伪类:not排除掉最后一个元素。
2.做border三角图标
很多开发者都用过border做的三角图标，本身三角符号就不属于文档，使用伪元素做三角符最合适了。
3.字符图标
最近笔者在开发微信小程序，因为微信小程序不支持svg和背景图，于是笔者大量使用字符图标，感觉字符图标非常方便，就是受设备系统字体库限制。
4.webfont的图标
现在webfont图标的最佳实践就是使用i标签和::after或者::before，实现这种图标最佳实践的工具非常多，比如http://fontello.com/，从这个网站我们可以下载svg的图标库。这种例子太多了，这里就不再列举。
5.做单位、标签、表单必填标准
笔者一直认为表单输入框的必填标记（往往是红色的“*”字符），不应该放到文档当中，使用::before可以很优雅地解决这个问题（其实就是字符图标的进一步应用）。
对于单位和前（后）置标签，也可以这样做。但是多数情况下不推荐这种做法，因为单位和标签应该是文档的一部分。
6.做一些效果
可以参考《理解伪元素 :before 和 :after》这篇文章的效果，笔者曾经在实际项目中使用过“迷人的阴影”效果，也曾在微场景开发中实现过一些类似的动画。
7.实现一些标签对placeholder的支持
只有几个标签支持placeholder，而且如<input type='date' />虽然是input但是也不支持。使用::before可以让一部分标签也实现对placeholder属性的支持。
8.实现文字图片居中对齐
优雅地实现张鑫旭老师的inline-box居中方法，使用一个高度为100%的::before将自身的对齐线移动到自己的中线，这样里面的所有内联元素都居中对齐了。
9.清除浮动
这个很常用，bootstrap的clearfix类就是使用这个方法。
10.使用pointer-events消除伪元素事件
之前提到过，伪元素::after和::before会替所在元素捕获用户事件，有时候这并非我们想要的，因为这样会影响被::after和::before覆盖的子节点或者兄弟节点捕获用户事件，使用pointer-events可以消除这种问题。
The source code of all examples is at https://github.com/laden666666/css-before-and-after-test
It’s simple to share so much. In short, the core of using pseudo-elements is more conducive to semantics. This is the premise of using ::after and ::before, otherwise it will be used indiscriminately. In general, it can be divided into four usages:
1. Create decorative elements with css
2. Use css to create elements for layout to achieve the special needs of special layouts
3. Do the realization means of displaying the icon
4. Display attribute value with attr
refer to:
http://www.webhek.com/pseudo-element/