css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。
css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使用；
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。那么问题来了，content属性的值可以有哪些内容呢，具体有以下几种情况：
字符串，字符串作为伪元素的内容添加到主元素中
注意：字符串中若有html字符串，添加到主元素后不会进行html转义，也不会转化为真正的html内容显示，而是会原样输出
attr(attr_name), 伪元素的内容跟主元素的某个属性值进行关联，及其内容为主元素的某指定属性的值
好处：可以通过js动态改变主元素的指定属性值，这时伪元素的内容也会跟着改变，可以实现某些特殊效果，如图片加载失败用一段文字替换。
url()/uri(), 引用外部资源，例如图片；counter(), 调用计数器，可以不使用列表元素实现序号问题。-
分享一些::after和::before使用的经验
- 以下例子多数是在特定平台上使用过的，未做兼容处理，建议在chrome下浏览
1.间隔符用法如文章最开始的例子，使用::after伪元素做间隔符，并使用伪类:not排除掉最后一个元素。
例子
2.做border三角图标很多开发者都用过border做的三角图标，本身三角符号就不属于文档，使用伪元素做三角符最合适了。
例子
3.字符图标最近笔者在开发微信小程序，因为微信小程序不支持svg和背景图，于是笔者大量使用字符图标，感觉字符图标非常方便，就是受设备系统字体库限制。
例子
4.webfont的图标现在webfont图标的最佳实践就是使用i标签和::after或者::before，实现这种图标最佳实践的工具非常多，比如Fontello – icon fonts generator，从这个网站我们可以下载svg的图标库。这种例子太多了，这里就不再列举。
5.做单位、标签、表单必填标准笔者一直认为表单输入框的必填标记（往往是红色的“*”字符），不应该放到文档当中，使用::before可以很优雅地解决这个问题（其实就是字符图标的进一步应用）。
对于单位和前（后）置标签，也可以这样做。但是多数情况下不推荐这种做法，因为单位和标签应该是文档的一部分。
例子
6.做一些效果可以参考《理解伪元素 :before 和 :after》这篇文章的效果，笔者曾经在实际项目中使用过“迷人的阴影”效果，也曾在微场景开发中实现过一些类似的动画。
例子
7.实现一些标签对placeholder的支持只有几个标签支持placeholder，而且如虽然是input但是也不支持。使用::before可以让一部分标签也实现对placeholder属性的支持。
例子
8.实现文字图片居中对齐优雅地实现张鑫旭老师的inline-box居中方法，使用一个高度为100%的::before将自身的对齐线移动到自己的中线，这样里面的所有内联元素都居中对齐了。
例子
9.清除浮动这个很常用，bootstrap的
clearfix类就是使用这个方法。例子
10.使用pointer-events消除伪元素事件之前提到过，伪元素::after和::before会替所在元素捕获用户事件，有时候这并非我们想要的，因为这样会影响被::after和::before覆盖的子节点或者兄弟节点捕获用户事件，使用pointer-events可以消除这种问题。
例子
所有例子的源码在https://github.com/laden/css-before-and-after-test
简单就分享这么多，总之使用伪元素的核心是更利于语义化，这是我们活用::after和::before的前提，否则就是胡乱使用了。总体可以分为四种用法：
1.用css创建装饰性元素
2.用css创建用于布局的元素，实现特殊布局的特殊需要
3.做显示图标的实现手段
4.配合attr显示属性值
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/203873.html原文链接：https://javaforall.net
