::after和::before的理解和使用

::after和::before的理解和使用

1.定义：

为当前元素增加装饰性内容，显示的是自身的content属性，默认是内联元素
使用样式创建出节点，但不会出现在DOM树上

<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.使用：

认为使用的元素存在一前一后俩个元素

<style>
    p:before{
        content: "H";
    p:after{
        content: "d";
    }
</style>
<p>ello Worl</p>

3.操作

	window.getComputedStyle(document.querySelector('li'), ':before')

::after和::before并不是真正的节点，所以也不能设置点击用户事件，但可以捕获用户事件，帮所在元素去捕获事件，事件的srcElement对象是伪元素所在的元素，而不是伪元素本身,document不能获取对应节点对象，但可以通过css接口获取样式属性，返回是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可以消除这种问题。

例子

所有例子的源码在https://github.com/laden666666/css-before-and-after-test

简单就分享这么多，总之使用伪元素的核心是更利于语义化，这是我们活用::after和::before的前提，否则就是胡乱使用了。总体可以分为四种用法：

1.用css创建装饰性元素

2.用css创建用于布局的元素，实现特殊布局的特殊需要

3.做显示图标的实现手段

4.配合attr显示属性值

 参考：

http://www.webhek.com/pseudo-element/

http://www.cnblogs.com/ys-ys/p/5092760.html

https://developer.mozilla.org/en-US/docs/Web/CSS/::after

原文出处：https://blog.csdn.net/w405722907/article/details/79446038

、