css伪元素before和after用法详解

要想了解伪元素before和after到底是什么，首先就应该打开编译器敲入代码并在浏览器运行检查

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box{width: 300px;height: 300px;background: pink;margin: 100px auto;position: relative;}.box::before{content: "我是before";background: yellowgreen;width: 100px;height: 100px;}.box::after{content: "我是after";background: yellow;width: 100px;height: 100px;}</style></head><body><div class="box">box</div></body>
</html>

由上图可知，伪元素before是.box中的第一个子元素，伪元素after是.box中的最后一个子元素，且由于二者都设置了宽高并未生效，且并未独占一行，由此可知，伪元素before和after都属于行内元素。

下面，我总结了几个伪元素before和after的几个重点，如果大家有疑问可以自行验证，或者在评论区留言。

1、伪元素before和after的content属性必须填写，可设置为空串；

2、伪元素before和after的content属性中的文本是不能被搜索引擎获取的；

3、伪元素before和after属于行内元素，并可通过设置display属性转换为块元素或者行内块元素；

关于伪元素的应用：

解决浮动元素导致其父元素高度塌陷的问题

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

给高度塌陷的父元素添加类名clearfix即可。

如果本文有任何错误，欢迎各位批评指正，或者在评论区留下你们的学习建议或看法，谢谢。

css伪元素before和after用法详解相关推荐

伪元素中content的用法详解
content:""----->扩展伪元素中的content玩起来,还是有很多花里胡哨的东西,我们来看看它的一些用法吧,可能我们用的比较少,但是有时候用到的时候,简直舒服呀 ...
CSS 伪元素 content的特殊用法
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪类选择器中,有一个content属性,能够实现页面中的内容插入. Co ...
css伪元素 before after的用法
在日常的代码中经常会发现类名带有::before 或者::after,但是这两个到底是什么呢? 举个小demo <body><div class="box"> ...
什么是伪类和伪元素？伪类和伪元素的区别的区别详解
1.伪类用来添加一些选择器的特殊效果. 2.伪元素伪元素是用来添加一些选择器的特殊效果. 3.区别伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一 ...
CSS 伪元素 counter-increment的多种用法
之前已经对CSS content属性进行了大概的了解,我们知道content中有一个counter属性(计数器),而使用counter的过程中我们要使用到counter-increment来递增一个或 ...
css文本行高是哪个属性_css属性行高line-height的用法详解
css属性行高line-height的用法详解发布时间:2014-08-02 23:21:52 作者:佚名我要评论本文介绍下css中的line-height属性的用法,通过实例学习css ...
详解CSS伪元素::marker
::marker介绍 ::marker CSS pseudo-element(CSS伪元素) 选中一个list item的marker box,后者通常含有一个项目符号或者数字.它作用在任何设置了di ...
css改变伪元素color_jQuery教程改变css伪元素样式详解
本篇教程介绍了jQuery教程改变css伪元素样式详解,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入. < 首先我们看一下css伪元素是什么: CSS 伪元素用于向某 ...
dw css定位,css关于position属性的用法详解(绝对定位和相对定位的混淆)
挺久没用,有点忘了关于position这个属性的用法,导致在练手的时候又犯了跟最开始新手才会犯的错误,那就是absolute和relative的用法. 在此首先看一下官方对这两个属性值的解释: pos ...

css伪元素before和after用法详解

css伪元素before和after用法详解

关于伪元素的应用：

css伪元素before和after用法详解相关推荐

最新文章

热门文章