|
伪元素的使用场景 伪元素是一个很好用的东西，它能够帮助我们简化html结构，不过很多人不太会使用它，也不知道什么时候该使用它，下面我就来说说关于伪元素的使用场景和使用方法。 什么是伪元素呢？其实它就是一个标签的子元素，不过这个子元素在html的代码中并不能见到，只能在css样式中对其进行配置。 如以下html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div></div> </body> </html> 这种布局结构，展示出来最终的dom结构如下： 一旦我在样式中配置了before或者after，如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 100px; height: 100px; background-color: blue; } div::before{ content: ""; } </style> </head> <body> <div></div> </body> </html> 则界面中最终呈现的dom结构将会变为： 在div下多了一个子元素before，after也是同理。所以before和after就是某个标签的子元素，在html代码中并没有这个标签，是通过样式进行配置的。 伪元素的使用方法： 关于伪元素有一定的语法要求，如下： 1、content属性必须得有 既然伪元素并不存在html标签中，不过它好歹是一个元素，既然是元素，在html标签中又不存在，那这个标签中的内容怎么配置呢？好比<div>123</div>中的123如何给伪元素配置呢？这时候就需要使用到content属性了，content属性相当于是标签中的内容。伪元素，content属性必须得有，无论你有没有内容。哪怕是一个空字符串也得有这个属性。 2、它是一个行内元素 既然是一个行内元素，如果要配置宽高，则需要将它变为块级元素 3、无法通过js代码获取到这个dom节点，所以它”伪” 伪元素的使用场景：1、只能看，不能摸的元素
红色框中的指示标识
绿色框中的小竖线 绿色框中的两个圆坑 2、清除浮动 .clearfix::before, .clearfix::after{ content: ""; display: block; height: 0; line-height: 0px; clear: both; visibility: hidden; } 3、字体图标 伪元素的使用限制：1、双标签才有伪元素，单标签是没有伪元素的 2、Js代码无法获取伪元素
| 
收藏
淘帖
踩
