::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
、