为了账号安全,请及时绑定邮箱和手机立即绑定

CSS中的伪元素

标签:
Html/CSS

本文主要浅谈::before 和 ::after的用法,因为之前就有很多大神写过,我就主要谈谈简单应用。

伪元素


webp

伪元素.png


图片引用文章
这张图片将我们常用的几种伪元素列出,我们在使用伪元素的时候为了能和伪类区分开,建议使用双冒号,虽然当前大部分浏览器都支持这两种写法。
今天主要是聊聊::before 和 ::after的用法


用法一:清除浮动

.clearfix::after {    content: "";    display: block;    clear: both;
}

这个写法已经是非常常用的写法,用于清除页面布局中浮动元素脱离文档流导致的问题。我们书写的时候只需要在css中把这个写上去,需要浮动的时候把浮动加在元素的css中,然后这些元素的父元素在class中加上.clearfix即可。
稍微说下这代码的意义:在类别为clearfix的元素后面添加一个伪元素,内容为空,这个伪元素是块级元素,并且始终处于之前解析的浮动元素的下方。简单来说就是这个浮动元素后面紧紧跟着一个元素,只不过这个元素你看不见,因为它既没有边框也没有内容.那么我们把这个伪元素通过边框调试出来看看。

webp

出现的伪元素.png


因为这个伪元素仍然是文档流,后面解析渲染的当然不可能在伪元素的上面。


用伪元素撑开父容器

这个一种特殊用法,使用场景可以是在父容器中某元素布局,但父容器因为一些原因没能够撑开到我们需要的高度。或者我们需要修改容器的高度大小,但是不合适在容器内再添加一个标签。


webp

撑开之前.png


webp

撑开之后.png

遮罩

需要在元素之前或者之后增加样式或者元素时使用伪元素。典型例子就是使用遮罩,用伪元素可以省标签。


webp

无遮罩.png


webp

有遮罩.png


用绝对定位+伪元素解决遮罩的布局问题,这样我们就不需要额外的增加标签

推荐

还有一些高级用法这里没有介绍,不过我发现一篇博文写的很不错,非常贴近工作的实用例子,推荐给大家【CSS进阶】伪元素的妙用--单标签之美



作者:张路1806
链接:https://www.jianshu.com/p/54da4e9006c0


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消