之前在网上总是可以看到::before :before ::after :after的相关文章,但是没有使用过,今天查了些资料,终于知道了他们的关系和作用。下面就做一个总结,方便有需要的朋友们可以参考借鉴,下面来一起看看吧。

第一部分:基础知识

1.与:active 和 :hover这些伪类不一样,他们都是伪元素。

2.:before/:after伪元素是在css2中提出来的。而::before/::after是在css3中的写法,这样从新提出是为了用两个冒号表示伪元素以区分伪类。

3.它们用在css里某个选择器之后,为了增添装饰性内容的,因为这样可以实现语义化,如果用html来添加一些没有实际内容的节点或者辅助式样本的文本,他们是毫无意义的。

4.它们有特有的属性content,其中添加的内容默认是内联元素。

5.创建的伪元素默认是在所依附的元素之上的,我们可以使用z-index:-1;把它放到下面去。

6.它们是虚拟节点,而不是真正的节点。如:

div::after{content: " ";border:thin solid red;}

我们在浏览器可以看到:

::after并不是一个真实节点,实际上我们在一些网站上经常可以看到它们的使用。

6.input,img,iframe等元素都不能包含其他元素,所以不能通过伪元素插入内容。

第二部分:应用

1.做间隔符。



伪元素

登录注册

效果如下:

2.做三角形



伪元素

登录

效果如下所示:

3.清除浮动(下面内容取自张鑫旭大神)



伪元素

效果如下:

注意:其中*zoom:1;是用来在IE6中清除浮动的(用在浮动元素的父元素上)。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

最新资讯
深圳开出首张电子烟罚单,罚款50元

深圳开出首张电子烟罚

执法现场共有6名烟民被罚,罚款50元。其中包括1名电子烟
报告:AI技术正有效缩小亚洲医疗发展的差距

报告:AI技术正有效缩小

《报告》以中国公司百度为例,介绍了其以AI为驱动打造的
毕马威发布2019科技行业创新报告:腾讯小米滴滴上榜

毕马威发布2019科技行

毕马威近日发布《2019年科技行业创新调查报告》,指出大
今年天猫双11首次可买房 阿里拍卖房源覆盖多地学区

今年天猫双11首次可买

今年天猫双11期间,将有上万套特价房源参与,其中部分覆盖
华为将与印度签署“无后门”协议

华为将与印度签署“无

华为印度分公司首席执行官陈杰13日表示,华为在印度电信
字节跳动教育硬件业务曝光 依托AI及原锤子硬件团队

字节跳动教育硬件业务

昨日字节跳动对外透露,如阳陆育(Louis yang,原musical.ly
最新文章
移动端开发1px线的理解与解决办法

移动端开发1px线的理

这篇文章主要给大家介绍了关于移动端开发1px线的理解
前端浏览器字体小于12px的解决办法

前端浏览器字体小于12

这篇文章主要给大家介绍了关于前端浏览器字体小于12px
详解Web前端性能优化详解之资源合并与压缩

详解Web前端性能优化

这篇文章主要介绍了详解Web前端性能优化详解之资源合
element.style内联样式的修改方法教程

element.style内联样

这篇文章主要给大家介绍了关于element.style内联样式
图文实操详解前端处理小图标的那些解决方案

图文实操详解前端处理

在前端日常开发中,小图标是必不可少的,我们该如何高效的
深入理解::before/:before和::after/:after的使用

深入理解::before/:be

之前在网上总是可以看到::before :before ::after :af