首页 > 代码库 > H5 68-伪元素选择器
H5 68-伪元素选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>68-伪元素选择器</title> <style> *{ margin: 0; padding: 0; } div{ width: 200px; height: 200px; background-color: red; } /* p{ width: 50px; height: 50px; background-color: pink; } */ div::before{ content: "爱你"; width: 50px; height: 50px; background-color: pink; display: block; } div::after{ /*指定添加的子元素中存储的内容*/ content: "么么哒"; /*指定添加的子元素的宽度和高度*/ width: 50px; /*height: 50px;*/ /*内容是可以超出标签的范围的, 所以高度为0依然可以看见内容*/ height:0; background-color: pink; /*指定添加的子元素的显示模式*/ display: block; /*隐藏添加的子元素*/ visibility: hidden; } </style> </head> <body> <!-- 1.什么是伪元素选择器? 伪元素选择器作用就是给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素 2.格式: 标签名称::before{ 属性名称:值; } 给指定标签的内容前面添加一个子元素 标签名称::after{ 属性名称:值; } 给指定标签的内容后面添加一个子元素 --> <div> <!--<p>爱你</p>--> 我是文字 <!--<p>么么哒</p>--> </div> </body> </html>
H5 68-伪元素选择器
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。