前端培训之css的伪元素::after和::before的使用

前端培训学习css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何使用他们?什么时候应该使用他们?笔者总结了一些对伪元素的理解和使用经验。

现象:在编写本条目时,除了Opera,在所有浏览器下input标签使用伪对象:before和:after都没有效果,即使Opera的表现也同样令人诧异。

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可以消除这种问题。


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)